材质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

Oké。没有问题的适当背景，这个答案是根本不可能的。但这也许也可以帮助其他人。

结果是，在我的应用程序中，我在ThemeProvider之外使用了Button组件。这样，添加了其他样式标签。由于该样式具有默认样式，并且由于后来在React树中使用，因此它覆盖了其他Button组件。

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

• 通过使用类使按钮的样式更具体
• 进行设置，以便将按钮添加到主题提供程序内部

我去找后者。