[MUI] コンポーネントをカスタマイズする方法

環境構築 ※今回はviteを使っています

• 下記コマンドを実行

yarn create vite #Enter
# プロジェクト名を入力　（今回は「vite-project」とする）
# 「React」を選択
# 「TypeScript」を選択

cd vite-project1 #Enter
yarn #Enter
yarn add @mui/material @emotion/react @emotion/styled #Enter

• src/index.cssの中身を削除

src/App.tsxを編集

// src/App.tsx
import { Box, Typography, AppBar, Toolbar } from "@mui/material";
import { styled } from "@mui/material/styles";

const ErrorAppBar = styled(AppBar)(() => ({
    width: "100vw",
    backgroundColor: "red",
}));

function App() {
    return (
        <Box>
            {/*↓↓デフォルトのAppBar*/}
            <AppBar sx={{ height: 70 }}>
                <Toolbar sx={{ height: "100%" }}>
                    <Typography>Note</Typography>
                </Toolbar>
            </AppBar>

            {/*　カスタマイズしたAppBar*/}
            <ErrorAppBar sx={{ height: 70, mt: "70px" }}>
                <Toolbar sx={{ height: "100%" }}>
                    <Typography>Error</Typography>
                </Toolbar>
            </ErrorAppBar>
        </Box>
    );
}

export default App;

結果

• 青いバーがデフォルトのAppBarです
• 赤いバーがカスタマイズしたAppBarです

終わりに

少し構えてましたが、これくらいのカスタマイズだったら意外と簡単でしたね