Question

我正在使用材料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块包装您的应用

例如：

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

希望这会对您有所帮助。

如何全局更改primaryColor？

1 个答案: