1

Есть компонент 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>

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

1 ответ 1

0

Хех. Не зря я целый месяц учил React... Вот так парень:

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

Можно даже захардкодить вот так:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.