ReactでマテリアルUIの環境構築

2023-04-14

はじめに

今回はReactでマテリアルUIの環境構築をする手順について説明します。

基本公式通りです。

実装

create-react-appでプロジェクトを作成する

yarn create react-app my-app
cd my-app
yarn start

上記のコマンドでプロジェクトを作成しましょう。

マテリアルUIと必要なライブラリをインストール

package.jsonのある階層で以下のコマンドを叩きます。

yarn add @mui/material @emotion/react @emotion/styled

これでインストール完了です。

ボタンを表示させてみる

- import logo from './logo.svg';
import './App.css';
+ import Button from '@mui/material/Button';

function App() {
  return (
    <div className="App">
+      <Button sx={{ m: 5 }} variant="contained">Hello World</Button>
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
    </div>
  );
}

export default App;

上記のようにファイルを修正しhttp://localhost:3000/にアクセスします。

下記のように表示されれば成功です。

リセットCSSの設定

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+ import CssBaseline from '@mui/material/CssBaseline';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
+    <CssBaseline />
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

これにてリセットCSSが導入されました。

グローバルCSSの設定

srcの下に「plugins」というフォルダを作成しその中に、「mui.js」を作成します。
以下のようにファイルに記載してください。

import { orange } from '@mui/material/colors';
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        // primaryの色を設定
        primary: {
            main: orange[300],
        },
    },
    components: {
        // ボタンのデザインを設定
        MuiButton: {
            styleOverrides: {
                containedPrimary: {
                    color: 'white',
                    borderRadius: 0,
                },
            },
        },
    },
});

export default theme;

ボタンのデザインやカラーをグローバルに設定しました。

以下のファイルを修正してください。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import CssBaseline from '@mui/material/CssBaseline';
+ import { ThemeProvider } from "@mui/material/styles";
+ import theme from './plugins/mui'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
+    <ThemeProvider theme={theme}>
      <CssBaseline />
      <App />
+    </ThemeProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

これでグローバルにCSSが設定されたはずです。

http://localhost:3000/にアクセスします。

デザインが適用されていれば成功です。