Material UIの配色を変更する

今回は小ネタですが今後も使えそうなネタなので残しておきます。

Material UIは全く指定しない場合、青(#1976d2)がデフォルトの配色です。

私のケースではずっと仮組みの状況から始まって、ある程度形ができてきた中で色が指定されたので、今からすべてのコンポーネントをひとつひとつ変更していくのはあまり得策ではありません。幸いReactには配色を変更する方法があるみたいなので利用してみます。

https://stackoverflow.com/questions/49535551/change-secondary-and-primary-colors-in-material-ui

import React from "react";
import { render } from "react-dom";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import orange from "@material-ui/core/colors/orange"
import App from "./App";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#293D62",
    },
    secondary: {
      main: orange[500],
    },
  },
});

render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.querySelector("#app")
);

今回の案件ではあらかじめ色がHEXコードで指定されていましたが、Material UIがあらかじめ用意したパレットから選ぶこともできます。