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

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

0 голосов
/ 31 августа 2018

https://codesandbox.io/s/w242n1vonw

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

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

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

<H1 color='green'/>

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

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

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

1 Ответ

0 голосов
/ 23 октября 2018

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

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

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

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

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

...