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 */
      }
    }
  })
);

反应：材质UI主题更改后，按钮不会更改其颜色

1 个答案: