Как делать нужные отступы при создании ui компонентов?

Question

[Leonardo-lavanda]

К примеру, у меня есть компонент такой кнопки:


Цель: сделать отступ справа, сверху от кнопок.
Как я делал раньше: у меня был prop className(у компонента кнопки), который дополнял класс самой разметке кнопки, по этому дополнительному классу я делал нужные отступы стилями. Проблема этого метода в том, что это плохой тон.

Сейчас я использую удобный плагин classnames и мой код выглядит так:

import React from 'react'; 
import './SimpleButton.sass';
import classNames from 'classnames';

export default function(props) {
  const className = classNames({
    'simple-button': true, 
    'simple-button_wide': props.width == 'wide',
    'simple-button_loading': props.loading,
  });

  switch (props.type) {
    case 'link': return(
      <a href={props.link} className={className}>{props.children}</a>
    );

    case 'submit': return(
      <button type="submit" className={className}>{props.children}</button>
    );

    default: return(
      <div className={className}>{props.children}</div>
    );
  }

  
}

Как теперь добавить в него класс, по которому я мог задать отступы? Или каким еще не костыльным методом можно это решить?

Comments

[Дмитрий]

В чем вопрос? Вы не знаете как добавить класс в classNames?

[Leonardo-lavanda]

Дмитрий, Вопрос в том, как я могу кнопке задать отступ не нарушая правила react

[abberati]

Leonardo-lavanda, реакт не накладывает никаких правил по верстке. Поэтому как бы вы ни добавляли отступы — вы не нарушите правила реакта

[Дмитрий]

Leonardo-lavanda, Мне неизвестно о правилах реакт, касающихся задавания отсупов. Всегда задавал без правил.