How to style a React component?

Question

React

There is a component Button, it has its own styles. But depending on where the , itself is Button, it may have margins or other properties to fit inside the parent box.
Code for Button

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

Can't add styles this way

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

If I do this, it works, but the extra wrapper doesn't look like a good solution.

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

How then to set these styles for indents and sizes?

Answer 1

Inside the component, your passed class can be accessed in the same way as regular props, i.e. this.props.className.
Then everything is simple, a little check and addition of strings is enough to get the desired result.

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>
        );
    }
}