Существуют ли альтернативные решения для использования миксинов в стилевых компонентах?

Question

Есть ли способ расширить каждый стилизованный компонент, кроме миксина, возможно, с помощью некоторого промежуточного программного обеспечения?Например, в настоящее время мы делаем это для каждого компонента в нашем наборе пользовательского интерфейса, чтобы обрабатывать крайние случаи, когда нам нужно иметь запас, отличный от того, что было жестко задано:

const Heading = styled.span`
    margin: 0;

    ${overrideMixin};
`;

const getValues = (values, { spacing }) =>
  values.map(val => (val ? `${rem(spacing[val])}` : "0")).join(" ");

const overrideMixin = ({ margin, theme }) =>
  margin ? `margin: ${getValues(margin, theme)};` : null;

export default Heading;

Затем мы используем его следующим образом:

<Heading margin={['md']} />

Проблема в том, что мы должны вставить этот миксин в каждый компонент (а это может быть около 100) - было бы хорошо, если бы это можно было где-то сделать (промежуточное ПО).

Answer 1

Почему бы не включить все ваши миксины в один файл и не передать его провайдеру темы?

import mixins from './mixins'
const theme = {mixins, vars, otherStuff}
<ThemeProvider theme={theme}>
  <App/>
</ThemeProvider>

Answer 2

Маршрут, по которому вы можете идти, - это иметь объект значений, по которому вы можете искать, при этом сохраняя значение по умолчанию.

ex.

Компонент:

<Heading margin={['md']} />

Стилизованный компонент:

const marginMap = {
  sm: '4px',
  md: '8px',
  lg: '10px',
  default: '0',
}
const Heading = styled.span`
  margin: ${({ margin = 'default'}) => marginMap[margin]};
`;

Возможно, возникла проблема со свойством компонента margin, являющимсято же имя, что и свойство css margin