React样式组件主题提供者动态主题

Question

我试图在我的React应用中实现黑暗和明亮的主题。我知道主题是如何工作的，所以我按照下面的方式配置我的按钮，例如：

const Button = styled.button`
   /* some styles */
    color: ${props => props.theme.main}
`;

然后我将主题定义为consts：

const dark = {
    main: 'black',
    text: 'switch to light mode'
};

const light = {
    main: 'white',
    text: 'switch to dark mode'
};

当我想在某处使用主题时，我会这样做：

  <ThemeProvider theme={dark}>
    <Button>{dark.text}</Button>
  </ThemeProvider>

但我想要实现的是动态更改主题（可能是按钮上的点击功能）。我是React的新手，所以请不要对我有意义。

Answer 1

这样的东西？ Demo

/* For Firefox */
white-space: pre-wrap;
overflow-wrap: break-word;

/* For Chrome and IE */
word-wrap: break-word;