样式化的组件-将道具传递给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>
  );
};

以上示例对c无效。但是有办法实现吗？
目前，我正在将 h6 包装到另一个SC中，并在本地添加font-weight。最好在全球范围内使用它，而无需创建另一个组件，就像粗体文本等的包装一样。

Answer 1

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

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

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

别忘了将<GlobalStyle />组件作为子组件添加到ThemeProvider，否则道具将不会出现。