样式化组件 - 将道具传递给 GlobalStyle答案

【问题标题】：styled components - passing props to GlobalStyle样式化组件 - 将道具传递给 GlobalStyle
【发布时间】：2020-10-28 05:32:14
【问题描述】：

我有 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 中，并在本地添加字体粗细。在全球范围内拥有它会更好，而无需创建另一个组件，就像粗体文本等的包装器一样。

【问题讨论】：

【解决方案1】：

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

我假设您已将 <ThemeProvider theme={your_theme} /> 添加为应用程序的包装器（例如 <App />），如果它们是 <App /> 的子组件，这会将 props 注入到您的所有样式组件中。

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

不要忘记将 <GlobalStyle /> 组件作为子组件添加到 ThemeProvider，否则不会填充道具。

【讨论】：