如何在样式组件中使用 {withTheme}。？任何人请给出实时示例

Question

其实，我不明白如何在样式组件中使用{withTheme}及其用法。因此，任何人都可以通过在样式化组件中使用 {withTheme} 来提供正确的代码。

Answer 1

withTheme 正在帮助您从组件道具中获取主题变量。当你定义一个主题时，你通常可以在样式组件中使用它们，但如果你用 withTheme HOC 定义你的组件，你可以在你的组件中使用这些变量。

// Define our button, with the use of props.theme
const Button = styled.button`
  color: ${props => props.theme.fg};
  border: 2px solid ${props => props.theme.fg};
  background: ${props => props.theme.bg};
`;

// Define our button, but with the use of component.props
const ThemeButton = (props) => (
  <button style={{background: props.theme.bg, color: props.theme.fg, border: `1px solid ${props.theme.fg}`}}>
  {`this button is using: ${props.theme.fg} and ${props.theme.bg}`}
  </button>
)

const ButtonWithTheme = withTheme(ThemeButton);

// Define our `fg` and `bg` on the theme
const theme = {
  fg: "palevioletred",
  bg: "white"
};

<ThemeProvider theme={theme}>
  <div>
    <Button>Default Theme</Button>
    <ButtonWithTheme></ButtonWithTheme>
  </div>
</ThemeProvider>

您可以在这里打卡https://codesandbox.io/s/zealous-sky-kgjqj?fontsize=14

如何在样式组件中使用 {withTheme}。？任何人请给出实时示例

How to use {withTheme} in styled component.? any one give real-time example please

reactjs

styled-components