在不同的文件中重用带有样式组件的“混合”？

Question

如何在不同文件中重用带有样式组件的样式集合？

使用 SASS，我可以像这样定义和使用 mixin：

@mixin section( $radius:4px ) {
  border-radius: $radius;
  background: white;
}

.box { @include section(); }

使用样式化组件，您可以扩展样式，但这意味着我需要将该组件导入到每个页面中。与 ThemeProvider 随处可用的变量相比，这相当麻烦。

Answer 1

只需添加@Evanss的答案

您可以通过执行以下操作使 mixin 成为一个函数（如在 OP 中）：

const theme = {
 sectionMixin: (radius) => `border-radius: ${radius};`
}

然后像这样使用它：

const Button = styled.button`
 ${props => props.theme.sectionMixin('3px')}
`

要不就：

const Button = styled.button`
 ${({ theme }) => theme.sectionMixin('3px')}
`

Answer 2

您可以创建一个包含多个 CSS 规则的字符串并将其传递给 ThemeProvider。

const theme = {
  sectionMixin:
    'background: white; border-radius: 5px; border: 1px solid blue;',
}


<ThemeProvider theme={theme}>