在不同的文件中重复使用 'mixin' 和带样式的组件？

Question

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

使用 SASS 我可以像这样定义和使用混入：

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

.box { @include section(); }

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

Answer 1

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

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


<ThemeProvider theme={theme}>

Answer 2

只是添加@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')}
`

Reuse a 'mixin' with Styled Components across different files?