【React】Material UIをReactに導入する方法
Material UIとは、
Googleが提唱する「マテリアルデザイン」というデザインシステムに沿って、
自分でデザインを一から設計しなくても、
キレイな画面をつくることができ、
なおかつ自由度も高い、Reactコンポーネントの人気のライブラリです。
今回、Reactで Material UI 改めMUIライブラリ(※)を導入する方法と、
マテリアルアイコンの使い方、
さらに、ボタンを事例として、各種CSSの適用方法を調べてまとめてみました。
※正式には、2021年にMaterial UI (v4)→MUI (v5)という名前に変わったそうで、
v5の指定方法についてまとめています。
Reactプロジェクトの準備
まず下準備として、
Reactの新規プロジェクトをつくり、
srcフォルダ内のファイルを一旦消したあと、index.jsとapp.jsを新規で用意します。
(typescriptを使わない例になります。)
Reactの環境構築については、【React】Voltaを使って、node.jsのインストール & Reactの環境構築をする方法にまとめました。
npx create-react-app my-app(任意の名前)
App.js
import React from 'react';
const App =()=>{
return(
<>
<h1>Hello!</h1>
</>
);
}
export default App;
index.js
import React from 'react';
import { createRoot } from 'react-dom/client'
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Material UI (MUI)の導入方法
先ほど用意したプロジェクト全体のフォルダに対して、
下記のコマンドを入力し、 Material UI ( MUI ) をインストールします。
( Emotion は、javascriptでcssを書く時に、書きやすくするためのライブラリ(css-in-JS)です)
npm install @mui/material @emotion/react @emotion/styled
起動をしてプレビューを開始します！
npm start
Material UI (MUI)を使う方法
あとは、使いたい部品をそれぞれインポートし、タグをコピーしてreturn 以下に追加します。
こちらの公式ページの「get started」ボタン押下 >Componentsから、
各部品のデモとタグを見ることができます。
たとえば、見出しとボタンを使いたい場合、App.jsに下記のように書きます。
import React from 'react';
import {
Typography,
Button,
CssBaseline,
} from "@mui/material";
const App =()=>{
return(
<>
<CssBaseline />
<Typography variant="h1">Hello</Typography>
<Button variant="contained">click!</Button>
</>
);
}
export default App;
※<CssBaseline/>は、CSSリセットの役割として入れてみました。(公式サイト参照)
GoogleのMaterial Iconを使う方法
Googleのマテリアルアイコンも使いたい場合は、
下記をターミナルに記入してインストールします。
npm install @mui/icons-material
マテリアルアイコン各種は、公式ページから探すことが可能です。
App.jsにインポートをしたら、return以下の使いたい場所に追加します。
import React from "react";
import { Button } from "@mui/material";
import { ArrowRight, Star } from "@mui/icons-material";
const App = () => {
return (
<>
<p><Button variant="contained" startIcon={<Star />}>
click!
</Button></p>
<p><Button variant="contained" endIcon={<ArrowRight />}>
click!
</Button></p>
</>
);
};
export default App;
ちなみにimportの書き方は2種類あり、アイコンタグを複数まとめて書く方法、
もしくは一つずつ書く方法(アイコンの個別ページに出るタグをそのままコピペ)があります。
前者の場合、「〇〇Icon」の「Icon」の部分を削除して書きます。
/* まとめて書く方法 */
import { ArrowRight, Star } from "@mui/icons-material";
/* 一つずつ書く方法 */
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import StarIcon from '@mui/icons-material/Star';
Material UI (MUI)にCSSを適用する方法
CSSの適用については、かなりさまざまな方法があるようなので、
先ほどのボタンのカラー変更を例として、設定方法を何点かまとめてみました。
1: テーマカラーごと変えるCSSを適用
Material UIは、すでにメインやサブカラー等も設定済みのため、
なにもしない場合、下記がデフォルトカラーになっています。
先ほどのボタンカラーも、primaryが自動で適用されています。
テーマカラー自体を他の色に変えたい場合、
それぞれにマッチするような色見本が最初からサイトに用意されているので、
これをimportして変更してあげると便利です！(下記例ではcyanとpinkをimport)
createThemeで色を指定したら、<ThemeProvider> </ThemeProvider>の
タグで挟んでカスタムテーマを適用します。
※TypeScriptを設定する場合は、公式サイトに事例が載っています。
import React from "react";
import { Button } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { cyan, pink } from "@mui/material/colors";
const myTheme = createTheme({
palette: {
primary: {
main: cyan[300],
},
secondary: {
main: pink[200],
},
},
});
const App = () => {
return (
<>
<ThemeProvider theme={myTheme}>
<Button color="primary" variant="contained">
click!
</Button>
<Button color="secondary" variant="contained">
click!
</Button>
</ThemeProvider>
</>
);
};
export default App;
もちろん、見本の色以外で、下記のように任意の色を指定することもできます。
secondary: {
main: '#353e3e',
},
全体的な色の組み合わせを確認したいときは、
下記サイトが便利です！
2: 普通のCSSを適用
2つ目は、CSSファイルを別途用意し、そこから読み込みをするパターンです。
javascriptの形式ではなく、CSSの普通の書き方ができます。
まず、srcフォルダに、CSSをファイルを用意します。
次にApp.jsで、CSSファイルをimportしたら、className=””で、各タグに適用します。
注意点としては、そのままだと、CSSの読み込みの順番で、
デフォルト設定の方に上書きされるようなので、
<StyledEngineProvider>で囲んで、読み込みの順番を変更します。
.mybutton{
background-color: #7a66e8;
}
.mybutton:hover {
background-color: #371ec7;
}
import React from "react";
import { Button } from "@mui/material";
import "./styles.css";
import { StyledEngineProvider } from "@mui/material/styles";
const App = () => {
return (
<>
<StyledEngineProvider injectFirst>
<Button variant="contained" className="mybutton">
click!
</Button>
</StyledEngineProvider>
</>
);
};
export default App;
3: sx props を使ってCSSを適用
3つ目は、sx props を使ってCSSを適用するパターンです。
タグに対して、sx={{ }} 内に、javascript形式で書いていきます。
ちょっとした変更を直接足したいときに便利な印象で、
タグの中にstyleプロパティを直接インラインで書く場合と比べると、
ネスト化できたり、簡略した書き方 (例えば、padding: → p: )もすることができます。
<Button
variant="contained"
sx={{
backgroundColor: "#fc46aa",
"&:hover": {
color: "#fc46aa",
backgroundColor: "#ffffff",
},
px: 5, //padding-left, padding-right
}}>
click!
</Button>
4: Styled ComponentsでCSSを適用
こちらは、スタイルを最初から適用した独自のコンポーネント(独自のタグ)をつくり、
それをreturn以下に記入する書き方になります。
中身はCSSの記述方法と同じになっています(CSS-in JS)。
import React from "react";
import { Button} from "@mui/material";
import { styled } from "@mui/material/styles";
const SButton = styled(Button)`
background-color: orange;
color: white;
padding: 1rem 3rem;
:hover {
background-color: #fef0a1;
}
`;
const App = () => {
return (
<>
<SButton>Click!</SButton>
</>
);
};
export default App;
5: EmotionでCSSを適用
Emotionは、色々な書き方ができるCSS-inJSライブラリで、
さきほどのStyled Componentsの書き方もできます(書き方は一緒)。
その他、こちらもCSSの記述方法で、下記のようにタグに書き込む書き方もできます。
import React from "react";
import { Button } from "@mui/material";
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
const App = () => {
return (
<>
<Button variant="contained" css={css`
background-color:#fc46aa;
:hover{
background-color:#ffffff;
color:#fc46aa;
}`} >
click!
</Button>
</>
);
};
export default App;
同じ内容で、分割して書くことも可能です。
import React from "react";
import { Button } from "@mui/material";
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
const buttonStyle = css`
background-color: #fc46aa;
:hover {
background-color: #ffffff;
color: #fc46aa;
}
`;
const App = () => {
return (
<>
<Button variant="contained" css={buttonStyle}>
click!
</Button>
</>
);
};
export default App;
※注意事項として、Emotionをつかう時は、
/** @jsxImportSource @emotion/react */ も記入しないと、
CSSがきちんと反映されないようです。
以上、Material UIをReactに導入する方法をご紹介いたしました。
最後までご覧いただき、ありがとうございました！
