javascript - 如何全局更改primaryColor？

Question

我正在使用 Material ui 进行电子学习项目。我在整个站点范围内更改主/辅颜色时遇到问题。如何全局设置原色？我已经检查过这个link

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

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // error: will use the default color
  },
});

它将作为单独的组件工作，但我需要在一个地方申请所有更改的组件？

有什么好的想法可以实现吗？

Answer 1

你所做的是正确的。为了实现这一点，请在全局范围内将您的应用程序用 MuiThemeProvider block 包裹

举个例子:

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

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // error: will use the default color
  },
});

export default class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        < your application code >
      </MuiThemeProvider>
    );
  }

希望这对您有帮助。