【React】Material UI(MUI)のテーマを変更してカスタマイズする方法｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 ReactでMaterial UI(MUI)のテーマを変更してカスタマイズする手順
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11
chart.js:4.4.0
react-chartjs-2:5.2.0
axios:1.5.0
cors:2.8.5
express:4.18.2
nodemailer:6.9.5

ReactでMaterial UI(MUI)のテーマを変更してカスタマイズする手順

ReactでMaterial UI(MUI)のテーマを変更してカスタマイズする手順を解説します。

テーマコンポーネントを作成する

まずは「react-portfolio-app/src/themes/配下」に「Theme.tsx」を作成します。

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

const theme = createTheme({
    palette: {
        primary: {
            main: '#ff5722',
        },
        secondary: {
            main: '#f50057',
        },
    },
    typography: {
        fontFamily: 'Arial, sans-serif',
        fontSize: 14,
        fontWeightLight: 300,
        fontWeightRegular: 400,
        fontWeightMedium: 700,

        h1: { fontSize: 60 },
        h2: { fontSize: 48 },
        h3: { fontSize: 42 },
        h4: { fontSize: 36 },
        h5: { fontSize: 20 },
        h6: { fontSize: 18 },
        subtitle1: { fontSize: 18 },
        subtitle2: { fontSize: 18 },
        body1: { fontSize: 16 },
        body2: { fontSize: 16 },
        button: { textTransform: 'none' },
    },
});

export default theme;

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

const theme = createTheme({

palette: {

primary: {

main: '#ff5722',

secondary: {

main: '#f50057',

typography: {

fontFamily: 'Arial, sans-serif',

fontSize: 14,

fontWeightLight: 300,

fontWeightRegular: 400,

fontWeightMedium: 700,

h1: { fontSize: 60 },

h2: { fontSize: 48 },

h3: { fontSize: 42 },

h4: { fontSize: 36 },

h5: { fontSize: 20 },

h6: { fontSize: 18 },

subtitle1: { fontSize: 18 },

subtitle2: { fontSize: 18 },

body1: { fontSize: 16 },

body2: { fontSize: 16 },

button: { textTransform: 'none' },

});

export default theme;

Material UIの公式サイトでテーマオプションのサンプルがあります。

公式サイト：https://mui.com/material-ui/customization/theming/

今回はテーマカラーを変更したいので「palette」プロパティの「primary」「secondary」のカラーコードをしています。

また、ポートフォリオサイトで使用するフォントを全体的に整えたいため、「typography」プロパティにフォントサイズやフォントの太さ、フォントサイズをカスタマイズしています。

インデックスコンポーネントにテーマを読み込ませる

次にインデックスコンポーネントにテーマを読み込ませていきます。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

import { ThemeProvider } from "@mui/material/styles";
import Theme from "./themes/Theme";

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ThemeProvider theme={Theme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </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();

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { BrowserRouter } from 'react-router-dom';

import { ThemeProvider } from "@mui/material/styles";

import Theme from "./themes/Theme";

const root = ReactDOM.createRoot(

document.getElementById('root') as HTMLElement

);

root.render(

<React.StrictMode>

<App />

</BrowserRouter>

</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();

最初に「ThemeProvider」と「Theme.tsx」をimportします。

次に「ThemeProvider」の引数に先ほど作成したテーマコンポーネントの「Theme」を渡すことにより、ポートフォリオサイト全体にカスタマイズしたテーマを適用することができます。

ほかにもコンポーネント単位のスタイルを割り当てることができる

こちらは余談になりますが、ほかにもコンポーネント単位のスタイルを割り当てることができます。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"
import SkillList from "../../components/SkillList"
import ProductionList from "../../components/ProductionList"
import ProfileList from "../../components/ProfileList";
import ContactForm from "../../components/ContactForm";

const styles = {
    boxContainer: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        margin: '60px 0',
    },
};

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box sx={styles.boxContainer}>
                <Container maxWidth='md'>
                    <SkillList />
                </Container>
            </Box>
            <Box sx={styles.boxContainer}>
                <Container maxWidth='md'>
                    <ProductionList />
                </Container>
            </Box>
            <Box sx={styles.boxContainer}>
                <Container maxWidth='md'>
                    <ProfileList />
                </Container>
            </Box>
            <Box sx={styles.boxContainer}>
                <Container maxWidth='md'>
                    <ContactForm />
                </Container>
            </Box>
        </>
    );
};

export default Top;

import React from "react";

import Box from "@mui/material/Box";

import Container from "@mui/material/Container";

import Grid from "@mui/material/Grid";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"

import SkillList from "../../components/SkillList"

import ProductionList from "../../components/ProductionList"

import ProfileList from "../../components/ProfileList";

import ContactForm from "../../components/ContactForm";

const styles = {

boxContainer: {

display: 'flex',

flexDirection: 'column',

alignItems: 'center',

justifyContent: 'center',

margin: '60px 0',

};

const Top: React.FC = () => {

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

</Container>

</Box>

</Container>

</Box>

</Container>

</Box>

</Container>

</Box>

</>

);

};

export default Top;

上記のようにスタイルを定義することにより、Material UI(MUI)のコンポーネントにスタイルを効率よく適用することができます。

こういった場合は「styles」というディレクトリを作成し、そこにスタイルコンポーネントを作成していけばコードの管理もしやすくなるかと思います。

おわりに

ReactでMaterial UI(MUI)のテーマをカスタマイズする方法について解説していきましたが、いかがだったでしょうか。

テーマの変更はそんなに難しいわけでもないため、サイト全体の印象を整えられるようにテーマコンポーネントを適用しておくとデザインの効率化にもなります。

是非、ReactでMaterial UI(MUI)のテーマを使いこなして、おしゃれなデザインにしていきましょう。