Javascript React样式化组件主题提供程序动态主题

我正在尝试在React应用程序中实现黑暗和光明主题。我知道主题是如何工作的，因此我正在如下配置我的按钮，例如：

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

然后我将主题定义为常量：

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>

{dark.text}

但是我想要实现的是动态地改变主题（可能是通过按钮上的点击功能）。我是个新手，所以请不要对我刻薄。

像这样的事

import React，{Component}来自'React'；
从'react dom'导入{render}；
导入样式化，{ThemeProvider}来自“样式化组件”；
常量主题={
“光”：{
主要内容:"EFEFEF",，
},
“黑暗”：{
主标题：“#666”，
}
}
常量DynamicDiv=styled.div`
背景：${（{theme}）=>theme.main}；
`
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
主题：主题[“光”]
};
}
handleDark=（）=>{
this.setState（{theme:themes['dark']}）
}
render（）{
返回(
{this.state.name}
变暗
);
}
}
render（，document.getElementById（'root'））；

我对它做了一点修改，您能告诉我是否正确吗？这是正确的-它正在工作，但如果您想切换，这里是我的建议：

import React, { Component } from 'react';
import { render } from 'react-dom';
import styled, { ThemeProvider } from 'styled-components';

const themes = {
  'light': {
    main: '#EFEFEF',
  },
  'dark': {
    main: '#666',
  }
}

const DynamicDiv = styled.div`
  background: ${({ theme }) => theme.main};
`

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      theme: themes['light']
    };
  }

  handleDark = () => {
    this.setState({ theme: themes['dark'] })
  }

  render() {
    return (
      <ThemeProvider theme={this.state.theme}>
        <div>
          <DynamicDiv>{this.state.name}</DynamicDiv>
          <div onClick={this.handleDark}>Change to Dark</div>
        </div>
      </ThemeProvider>
    );
  }
}

render(<App />, document.getElementById('root'));