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

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

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

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

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

Next.jsでReactを使った開発環境を作成する方法
Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで開発環境を簡単に準備することができます。

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 コンポーネントを作成することができます。

スポンサーリンク
スポンサーリンク
React学習のおすすめの本
Javascriptの学習におすすめの本
JavaScript
スポンサーリンク
ソフトウェア開発日記
タイトルとURLをコピーしました