Reactjs 如何在样式化组件中使用{withTheme}。？任何人都可以给出实时的例子

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

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>

//使用props.theme定义我们的按钮
const Button=styled.Button`
颜色：${props=>props.theme.fg}；
边框：2px solid${props=>props.theme.fg}；
背景：${props=>props.theme.bg}；
`;
//定义我们的按钮，但使用component.props
const ThemeButton=（道具）=>(
{`此按钮正在使用：${props.theme.fg}和${props.theme.bg}}
)
const button with theme=with theme（主题按钮）；
//在主题上定义我们的'fg'和'bg'
常量主题={
前景：“紫罗兰树”，
背景：“白色”
};
默认主题

---

你可以在这里登记

谢谢@hurricane现在我明白了，它工作得很好。！