Question

除了使用mixin之外，是否可以通过使用某种中间件来扩展每个样式化的组件？例如，我们目前正在UI工具包中的每个组件上执行此操作，以处理需要与硬编码的边距有所不同的边际情况：

Html.Action("Action", "Controller")

然后我们像这样使用它：

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;

问题是我们必须将此mixin插入每个组件中（这可能是100个左右）-能够在某个地方（中间件）执行一次是很好的。

Answer 1

您可能可以走的一条路线是拥有一个可以搜索的值的对象，同时仍然设置默认值。

例如。

组件：

<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属性同名的问题

Answer 2

为什么不将所有mixins包含在一个文件中，然后将其传递给主题提供程序？

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

在样式化组件中使用mixins是否有替代解决方案？

2 个答案: