Сохранить имя класса при обертке элемента стилизованными компонентами

Question 1

Я использую сетку 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

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

reactjs styled-components

2

Mister Epic 18 Июл 2017 в 21:04

Answer

То, что вы делаете с {...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

Question 2

То, что вы делаете с {...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

Сохранить имя класса при обертке элемента стилизованными компонентами

1 ответ

Похожие вопросы

Новые вопросы

reactjs