React：Material UI主题更改后按钮不会更改其颜色

Question

我想看到我包含的主按钮的颜色在主题更改时略有变化，但我做不到。

如果我通过删除 'variant="contained"' 将按钮从包含按钮更改为文本按钮，我看到它有效，但我真的想使用包含按钮

有没有办法让它工作？

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // Because of <React.StrictMode>, <CssBaseline /> didn't work when theme was changed.
  // <React.StrictMode>
  //   <App/>
  // </React.StrictMode>,
  <App />,
  document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import './App.css';
import { Button, Container } from '@material-ui/core';
import ChangeTheme from './components/ChangeTheme';
import { lightTheme, darkTheme } from './libs/Theme';
import { MuiThemeProvider, CssBaseline} from '@material-ui/core';


function App() {
  const [theme, setTheme] = useState(darkTheme);

  const handleChangeTheme = (setDark) => {
    setDark === true ? setTheme(darkTheme) : setTheme(lightTheme);
  }

  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Button variant="contained" color="primary">Hi</Button>
    </MuiThemeProvider>
  );
}

export default App;

libs/Theme.js

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

export const lightTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'light'
    }
  })
);

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark'
    }
  })
);

Answer 1

这是因为 Material UI 提供的自动生成的深色主题只会更改调色板中的特定颜色。 它不会改变主要/次要背景（primary.main 或 secondary.main）颜色。

从他们的网站上查看this page，该网站列出了由自动生成的深色主题更改的颜色。您会在那里发现文本颜色是主题更改时更改的颜色之一；这就解释了为什么您可以在 variant="text" 按钮中看到更改，但在 variant="contained" 按钮中看不到。

最好的办法是在主题声明中为深色主题手动指定更改后的颜色。比如：

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: "#000000" /*or whatever color you desire */
      }
    }
  })
);