styled-components - 在不同的文件中重用带有样式组件的 'mixin' 吗？

Question

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

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

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

.box { @include section(); }

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

https://www.styled-components.com/docs/basics#extending-styles

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')}
`