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

Question

我希望看到每当主题更改时我包含的主按钮的颜色都会略有变化，但我做不到。

如果我通过删除“variant=”contained”将按钮从包含的按钮更改为文本按钮，我发现它有效，但我真的想使用包含的按钮

有什么办法让它发挥作用吗？

索引.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')
);

应用程序.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;

库/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）颜色。

从他们的网站查看此页面，其中列出了自动生成的深色主题更改的颜色。您会发现文本颜色是主题更改时更改的颜色之一；这就解释了为什么您可以看到按钮中的变化variant="text"，但看不到按钮中的变化variant="contained"。

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

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