よくmaterial-uiのコンポーネントでcolor=”primary”など指定していると思います。
createMuiTheme、ThemeProviderを使うことで、アプリ全域で使用するprimaryの色やsecondaryの色を一か所で設定することができます。
最初に以下のようにcreateMuiThemeでテーマカラーを指定します。指定する色については以下のページを参照してください。
https://material-ui.com/customization/color/#color
import { createMuiTheme } from '@material-ui/core/styles';
import { green, orange } from '@material-ui/core/colors';
const theme = createMuiTheme({
palette: {
primary: {
main: orange[500]
}
secondary: {
main: green[500],
},
},
});次にアプリにテーマカラーを適用します。
例えばApp.jsのようなアプリの起点のコンポーネントを以下のようにThemeProviderで囲うことで、囲ったコンポーネント全域でprimary, secondaryに指定した色が適用されます。
イメージとしてはuseContextのProviderと同じように指定することで全域で適用するようにするイメージです。
import React from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { green, orange } from '@material-ui/core/colors';
const theme = createMuiTheme({
palette: {
primary: {
main: orange[500]
}
secondary: {
main: green[500],
},
},
});
export default function App() {
return (
<ThemeProvider theme={outerTheme}>
<ルートのコンポーネント />
</ThemeProvider>
);
}