reactjs切换自定义主题无法正常工作

问题描述

我有三个基本的自定义主题，我想在它们之间进行切换。

我有一些问题/疑问：

为什么CustomToolbar.jsx中的容器正在工作，而Component1.jsx中的容器却没有？
为什么App.js中的按钮更改背景而组件中的按钮没有更改？（也是）
有时，当我多次单击CustomToolbar上的按钮时，出现错误：

Warning: Failed prop type: The prop `theme` is marked as required in `ThemeProvider`,but its value is `undefined`.
    in ThemeProvider (at CustomThemeProvider.js:37)

    in CustomThemeProvider (at src/index.js:11)

我不知道如何管理它们，并且对改善代码的任何帮助都是很棒的。

https://codesandbox.io/s/musing-cache-s92ez

解决方法

问题1和2 ：这是因为要将每个组件包装在ThemeProvider / MuiThemeProvider内，这样做会覆盖您的自定义主题。

将App包裹在index.js的CustomThemeProvider中。

问题3 ：当单击e.target.innerHTML时，并非总是返回按钮内的文本。尝试使用控制台日志记录，然后单击按钮，但不在文本上，您会看到类似的

<span class="MuiButton-label">red</span><span class="MuiTouchRipple-root"><span class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible" style="width: 128.825px; height: 128.825px; top: -35.4127px; left: -8.41273px;"><span class="MuiTouchRipple-child MuiTouchRipple-childLeaving"></span></span></span>

要解决此问题，您可以改用e.currentTarget.textContent。

请查看下面的演示。

material-ui reactjs reactjs themes