reactjs 切换自定义主题无法按预期工作

Question

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

我有一些问题/疑问：

为什么来自 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

Answer 1

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

将 App 包裹在 index.js 上的 CustomThemeProvider 内就足够了。

问题 3：e.target.innerHTML 将 不总是 return 单击按钮内的文本。尝试控制台日志记录，然后单击按钮而不是文本，您会看到类似

的内容

<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。

请查看下面的演示。

reactjs 切换自定义主题无法按预期工作

reactjs switch custom themes doesn't work as expected

themes

reactjs

material-ui