在不同的文件中重复使用Styled Components的'mixin'？

Question

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

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

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

.box { @include section(); }

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

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

Answer 1

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

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


<ThemeProvider theme={theme}>

Answer 2

只需添加@Evans的答案

您可以执行以下操作使mixin成为一个函数（与OP中一样）：

[{"Email":"dimitris2@in.gr","Password":"Password1?","ConfirmPassword":"Password1?"}]

然后像这样使用它：

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