Как изменить primaryColor глобально?

Question

Я использую материал пользовательского интерфейса для проекта электронного обучения. У меня есть проблема с изменением основного / дополнительного цвета по всему сайту. Как я могу установить основной цвет в глобальном масштабе? Я должен проверить эту ссылку

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 blocks

в качестве примера:

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

Надеюсь, это поможет вам.