Я использую сетку Bootstrap, поэтому я создаю компоненты, которые отображают элементы, которые включают class:

const Row = props => (
  <div className="row" {...props}>
    {props.children}
  </div>
);

Иногда я хочу, чтобы моя строка была дополнена, поэтому я попытался обернуть свой компонент Row:

const PaddedRow = styled(Row)`
  padding: 20px;
`;

Это применяет заполнение, но когда div визуализируется, он не имеет класса.

Плагин Chrome React показывает следующее:

<Styled(Row)>
  <Row className=".sc-cHds hQgwd">
    <div className=".sc-cHds hQgwd">  // No "row" class

Возможно ли сохранить имя класса для обернутого компонента?

2
Mister Epic 18 Июл 2017 в 21:04

1 ответ

Лучший ответ

То, что вы делаете с {...props}, - это распространение пропущенного реквизита. styled-components передает сгенерированный className через эти реквизиты, и поскольку вы применяете распространение после своего свойства className, он переопределяет существующий класс.

Если бы вам пришлось вручную написать, что делает ваш код, в итоге это выглядело бы так:

<div className="row" className="sc-cHds">

Это дает понять, в чем проблема: второе объявление className имеет приоритет над первым ! Решением, если бы я строго придерживался вашего кода, было бы объединить переданный класс вручную:

<div {...props} className={`row ${props.className}`}>

Это работает, однако это не идиоматическое использование styled-components . Вместо того, чтобы заключать компонент в styled(Row), мы рекомендуем создать стилизованный компонент для этого <div />:

    const RowWrapper = styled.div`
      padding: 20px;
    `

    const Row = props => (
      <RowWrapper className="row">
        {props.children}
      </RowWrapper>
    );

Это способ использования styled-components, он также автоматически объединит ваш класс Bootstrap с автоматически сгенерированным.

3
Pan Vi 10 Фев 2021 в 03:19