样式组件 - 将 props 传递给 GlobalStyle

Question

我有GlobalStyle，有一些覆盖，例如：

const GlobalStyle = createGlobalStyle`
  h6 {
    font-weight: ${props => (props.semibold ? 600 : "bold")};
    font-size: 16px;
  }
  ...
`;

我想将道具从我的组件传递到 GlobalStyle 例如。重量。像这样的东西（来自 JSX）：

const LocalComponent = () => {
  return (
    <div>
      <h6 semibold>This should be semi-bold text</h6>
    </div>
  );
};

上面的例子不起作用。但有没有办法实现这个目标呢？
目前我正在将 h6 包装到另一个 SC 中，并在本地添加字体粗细。最好在全球范围内拥有它，而无需创建另一个组件作为粗体文本等的包装器。

Answer 1

我确定这是否是您真正需要的，但您可以尝试一下。

我需要根据 i18next 的语言更改我的字体系列，并想将 prop 转发到 GlobalStyle，但没有找到直接的方法。

然后，我尝试向 ThemeProvider 发送一个“lang”属性，以便可以从 styled 中的 props 对象访问它，并且它成功了：

<ThemeProvider 
   theme={{ 
           ...theme, 
           lang: i18n.language 
          }}>
   <RouterProvider router={router} />
   <GlobalStyle />
</ThemeProvider>

然后我访问 GlobalStyle 中的“lang”：

body {
    font-family: ${(props) => {
      switch (props.theme.lang) {
        case 'en':
          return 'Mulish, sans-serif';
        default:
          return 'Outfit, sans-serif';
      }
    }};
    
}

我不确定这是否是最好的解决方案，但它确实有效。

Answer 2

根据以上信息，尚不清楚缺少哪一部分。

我假设您已将

 <ThemeProvider theme={your_theme} />

添加为应用程序的包装器（例如

<App />

），如果它们是

<App />

的子级，这会将道具注入到所有样式组件中。

  <ThemeProvider theme={your_theme}>
     <GlobalStyle />
     <App />
  </ThemeProvider>

不要忘记将

<GlobalStyle />

组件作为子组件添加到 ThemeProvider 中，否则道具将不会填充。