Material UI コンポーネントは Googleのマテリアルデザインをベースに開発されたライブラリです。
Material UI コンポーネントは React に導入するだけで簡単に Material UI に則ったサイトを構築することができますが、その Style を独自に変更したい場合も出てきます。
この記事では Material UI コンポーネントの Style をオーバライドする方法を解説します。
React 環境のをまだ作成されていない場合は、以下のサイトを参照して作成してください。
![](https://lightgauge.net/wp-content/uploads/2017/04/63515349bf228251f9b6397b8a88da1e_s.jpg)
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 コンポーネントを作成することができます。