【React】Material-UIで導入したコンポーネントのカラー変更方法

Material-UIの色

Material-UIでボタンやアプリバーなどを手軽に導入できますが、そのまま導入するとデフォルトの色で配置されます。

アプリによってはデフォルトとは違う色合いでコンポーネントを使いたい場合があると思います。

今回はデフォルトから指定の色に、コンポーネントの色を変更する方法について書いていきます。

実装方法

いきなりですが実装方法です。
今回はアプリバーの「基本的な検索フィールド付きApp Bar」を使用します
デフォルトは下記画像になります。

基本的に青色を基調とし、数字は赤色になっています。

このコンポーネントのコードに、そのままコンポーネントのcolorをredにしてもコンポーネントの色は変わりません。

コンポーネントの色を変えるには、
1.createMuiThemeを定義して、色を定義する
2.上記で定義したcreateMuiThemeをthemeとして親要素の引数で渡す
上記2点をする必要があります。
下記のようになります。

APP.js

import React from 'react';
import PrimarySearchAppBar from "./component/MaterialUIHead";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

//primaryとsecondaryで、色を指定します
const myTheme = createMuiTheme({
  palette: {
    primary: {
      main: "#9c27b0",
    },
　　secondary: {
      main: "#76ff03",
    },
  },
});

function App() {
  return (
    //PrimarySearchAppBarの親要素にThemeProviderを配置し、themeに上記で定義したmyThemeを渡します
    <ThemeProvider theme={myTheme}>
        <PrimarySearchAppBar></PrimarySearchAppBar>
    </ThemeProvider>
  );
}

export default App;

上記コードを適用すると、下記のようになります。
今回はPrimaryに紫、secondaryに黄緑色を指定しました。

色について

ちなみに、任意の色の16進数を下記で定義できます。
Material-UI Playground
https://material-ui.com/ja/customization/color/#playground

参考

Material-UI コンポーネント内のテーマへのアクセス
https://material-ui.com/customization/theming/#accessing-the-theme-in-a-component

Material-UI基本的な検索フィールド付きApp Bar
https://material-ui.com/ja/components/app-bar/#app-bar-with-a-primary-search-field

Material-UI Playground
https://material-ui.com/ja/customization/color/#playground