Material UI 默认主题覆盖自定义主题

Question

在我的应用程序中，我正在应用 Material UI 文档中描述的自定义主题。

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';

const App = () => {
  const theme = createMuiTheme({ palette: { primary: { main: 'red' } } });

  return (
    <MuiThemeProvider theme={theme}>
      <Route path="/" component={Home} />
    </MuiThemeProvider>
  );
}

但是发生的情况是，如果我从核心包中应用一个 Button，它会得到正确的覆盖颜色（在本例中为红色）。但是随后发生了重新渲染，并且突然将颜色更改为默认的 Material UI 颜色，即蓝色。

奇怪的是，如果我查看页面的源代码，有两个应用了样式标签的实例：

第一个样式标签包含“红色”。但第二个样式标签包含默认的 Material UI 颜色 (#3f51b5)。

我不知道去哪里找。

Answer 1

好的。如果问题没有适当的上下文，这个答案根本不可能。但也许这也可以帮助其他人。

在我的应用程序中，我在 ThemeProvider 之外使用了一个 Button 组件。通过这样做，添加了额外的样式标签。由于那个具有默认样式，并且因为它稍后在 React 树中使用，它覆盖了其他 Button 组件。

现在我想有两种方法可以解决这个问题：

• 使用类使样式更具体到按钮
• 将按钮添加到主题提供程序中

我选择了后者。