Как расширить базовые компоненты в стиле эмоций CSS?

Question

https://codesandbox.io/s/w242n1vonw

У меня есть проект с использованием системной системы и реагирующих эмоций.

У меня есть стилизованные заголовки, которые наследуются от базового CSS для повторного использования.

Иногда я хочу иметь возможность перезаписывать свойства, используя стилизованную систему, такую ​​как:

<H1 color='green'/>

Это работает и хорошо, когда мой базовый компонент:

const BaseHeading = ({ theme, ...props }) => css`
  color: ${props.color ? props.color : theme.secondary};
`;

Но если я хочу переопределить десять свойств, мне нужно повторно использовать этот условный реквизит. Это идиоматический способ написать такую ​​функциональность?

Answer 1

Вы можете создать новый компонент с настраиваемым стилем, который расширяет компонент с другим стилем, используя стилевую функцию из @ Emotion/styled. Допустим, у вас есть стилизованный компонент под названием BoldText.

const BoldText = styled("div")`
  font-size: 16px;
  font-weight: bold;
`;

Вы можете переопределить определенные свойства BoldText, создав новый стилизованный компонент, основанный на BoldText, аналогично тому, как BoldText построен на основе div.

import styled from "@emotion/styled";
import BoldText from "./BoldText"

const BigBoldText = styled(BoldText)`
  font-size: 20px;
`

<BoldText>I'm bold and 16px</BoldText>
<BigBoldText>I'm bold and 20px</BigBoldText>

Answer 2

Я считаю, что это правильный подход к переопределению нескольких свойств. Если у вас есть другие свойства, которые исправлены как margin Например, вы могли бы сделать что-то вроде ниже, чтобы помочь прояснить ваш файл "CSS".

const marginMap = {
  sm: '4px',
  md: '8px',
  lg: '10px',
  default: '0',
}

const BaseHeading = styled.header`
  margin: ${({ margin = 'default'}) => marginMap[margin]};
`;

Ты можешь измениться 'default' быть вашей основной темой

Но на ваш вопрос, я не видел лучшего способа перезаписать свойства, используя стилизованные системные / стилизованные компоненты