Как расширить стили нескольких компонентов в styled-components

Question

У меня есть эти компоненты: ...

const Card = () => <span>There is content</span>

const CardItem = styled(Card)`
  background-color: red;
`

Теперь я хочу еще один компонент из приведенного выше:

const Card2 = styled(CardItem)`
  background-color: green;
`

Для моего третьего элемента я хочу, чтобы всеВышеперечисленные стили расширены, а также расширены button html-элементом.

Вот как я это сделал ...

Card3 = Card2.withComponent('button').extend`
  pointer-events: none;
`

Но после этого я получаю Карту 2 как <span>There is content</span>, ноКарта 3 просто пустая. `НЕТ содержимого

Я понимаю, withComponent заменяет только теги (idk), но как мне этого добиться?

Answer 1

Несколько вещей, чтобы заставить это работать:

Сначала , Styled Components преобразует ваш CSS в классы CSS, а затем присоединяет эти классы к компонентам React через className prop.Это означает, что для того, чтобы стиль действительно был применен, вы должны убедиться, что className опора обрабатывается.Прямо сейчас компонент Card не делает этого.

Вы хотите, чтобы <Card> принял className реквизит:

const Card = ({className}) => <span className={className}>There is content</span>

Это позволит CardItem и Card2отображение по назначению.

Секунда , для Card3, withComponent не заменяет тег, он заменяет весь компонент.По этой причине весь текст Card будет заменен кнопкой, включая текст внутри Card.Если вы все еще хотите этот текст, вот два возможных решения:

Вы можете передать детей в Card3:

return <Card3>There is content</Card3>

Или вы можете добавить реквизит для имени тега к оригиналу Card:

const Card = (props) => {
  const Tag = props.tag || 'span'
  return <Tag className={props.className}>There is content</Tag>
}

const ButtonCard = props => <Card {...props} tag="button" />

const Card3 = Card2.withComponent(ButtonCard).extend`
  pointer-events: none;
`