Material UIコンポーネントのStyleをオーバライドし活用する方法

Material UI コンポーネントは Googleのマテリアルデザインをベースに開発されたライブラリです。

Material UI コンポーネントは React に導入するだけで簡単に Material UI に則ったサイトを構築することができますが、その Style を独自に変更したい場合も出てきます。

この記事では Material UI コンポーネントの Style をオーバライドする方法を解説します。

React 環境のをまだ作成されていない場合は、以下のサイトを参照して作成してください。

Next.jsでReactを使った開発環境を作成する方法

Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx...

Material UIコンポーネントのStyleをオーバライドする
オーバライドしたStyleを適用する
まとめ

Material UIコンポーネントのStyleをオーバライドする

Material UI コンポーネントの Style をオーバライドする簡単な方法は createMuiTheme を使う方法です。

createMuiTheme は @material-ui/core/styles を import することで利用できるようになります。

import { createMuiTheme }  from "@material-ui/core/styles" ;

実際に Material UI コンポーネントの Style をオーバライドするには overrides を使って、該当の Material UI コンポーネントの Style を変更していきます。

下記は Button コンポーネントの Style を変更する記述です。

export const MyTheme = createMuiTheme( {
    //Material-UIのStyle
    overrides:{
        MuiButton:{
            root:{
                margin: "10px 20px 10px 20px",
            },
            label{
            },
            text{
            },
        },
    },
}

MuiButton の root、label、text などはMuiButtonコンポーネントの CSS に設定されている Rule name を記述したものです。

オーバライドしたStyleを適用する

createMuiTheme を使ってテーマを作成したら、それを各コンポーネントに適応していきます。

テーマを適応するには MuiThemeProvider を使います。

MuiThemeProvider を使えば、配下にある Material UI コンポーネントに設定した Style を自動で適応することができます。

import React from "react" ;
import Button from "@material-ui/core/Button" ;
import {MuiThemeProvider} from "@material-ui/core/styles" ;
import MyTheme from "./MyTheme" ;  /*createMuiThemeを使って独自に作成したテーマファイル*/

export default class MyThemeTest extends React.Component {
    constructor( props ){
        super( props ) ;
    }
    render(){
        <React.Fragment>
            <MuiThemeProvider theme={MyTheme}>
                <Button variant="contained" color="primary">Style設定されたボタン</Button>
            </MuiThemeProvider>
        </React.Fragment>
    }
}

これで Material UI コンポーネントの Button コンポーネントに自作したテーマの Style が設定されます。

まとめ

Material UI コンポーネントの Style をオーバライドするには createMuiTheme を使ってオーバライドし、その Style を適応するには MuiThemeProvider を使うと簡単に共通化した Style の Material UI コンポーネントを作成することができます。