Как добавить стили компоненту React?

Question

[Оля Копьёва]

Есть компонент Button, у него есть свои стили. Но в зависимости от того, где находится сам Button, у него могут быть внешние отступы или другие свойства для размещения внутри родительского блока.

Код для Button

export default class Button extends PureComponent {
  render() {
    return <button className="button">
      <span className="button_text">
        {this.props.children}
      </span>
     </button>
  }
}

Добавить стили таким образом не получается

<Button className="popup_button">Отправить</Button>

Если делаю так, работает, но дополнительная обертка не выглядит, как хорошее решение

<div className="popup_button">
  <Button>Узнать больше</Button>
</div>

Как же тогда задавать эти стили для отступов и размеров?

Comments

[Роман Александрович]

Можно вкратце в чем проблема?
что вам мешает навесить на кнопку еще один класс <button className="button mycss">
и повесить все необходимые стили?

Answer 1

[alvvi]

Внутри компонента доступ к вашему переданному классу можно получить так же как и к обычному props'у, то есть this.props.className.
Дальше все просто, достаточно небольшой проверки и сложения строк чтобы получить нужный результат.

Answer 2

[Ваге]

export default class Button extends React.Component {
    render() {
        const { className } = this.props;
        return (
            <button className={className ? className : "button"}>
                <span className="button_text">
                    {this.props.children}
                </span>
            </button>
        );
    }
}