reactjs - 样式化组件 - 将 Prop 传递给 GlobalStyle

Question

我有 GlobalStyle 和一些覆盖，例如:

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

我想将 Prop 从我的组件传递给 GlobalStyle，例如。重量。像这样(来自 JSX):

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

上面的例子不工作。但是有什么办法可以实现吗？
目前我正在将 h6 包装到另一个 SC 中，并在本地添加字体粗细。最好在全局范围内使用它，而不需要创建另一个组件作为粗体文本等的包装器。

Answer 1

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

我假设您已经添加了 <ThemeProvider theme={your_theme} />作为您应用程序的包装器(例如 <App /> )如果它们是 <App /> 的子项，这会将 Prop 注入(inject)所有样式组件中。 .

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

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