MUI Snackbarの背景色（background color）を変更する方法
公開日:
更新日:
MUIのSnackbarに関して
今回はReactのMUI（Material UI）を使用していきます。
Snackbar（いわゆる通知、Alert機能）の背景色や文字色を変える時に少し苦戦したので下記にまとめます。 言語はTypeScriptですがJavaScriptでも同様にできるはずです。
ContentPropsのsxプロップスを利用する
example.tsx
1<Snackbar
2 open={open}
3 autoHideDuration={6000}
4 onClose={handleClose}
5 message="Snackbar"
6 action={action}
7 ContentProps={{
8 sx: {
9 background: "red",
10 color: "#03fc0f",
11 }
12 }}
13/>上記のようにContentPropsというpropsを利用して中に背景色などの設定を書き込めばいいみたいです。
完成デモ
下記に全体のソースコードも共有しておきます。
example.tsx
1"use client";
2import {
3 Button,
4 IconButton,
5 Snackbar,
6 SnackbarCloseReason,
7} from "@mui/material";
8import React from "react";
9import { useState } from "react";
10import CloseIcon from "@mui/icons-material/Close";
11
12export default function Home() {
13 const handleClick = () => {
14 setOpen(true);
15 };
16 const [open, setOpen] = useState(false);
17 const handleClose = (
18 event: React.SyntheticEvent | Event,
19 reason?: SnackbarCloseReason
20 ) => {
21 if (reason === "clickaway") {
22 return;
23 }
24
25 setOpen(false);
26 };
27
28 const action = (
29 <React.Fragment>
30 <IconButton
31 size="small"
32 aria-label="close"
33 color="inherit"
34 onClick={handleClose}
35 >
36 <CloseIcon fontSize="small" />
37 </IconButton>
38 </React.Fragment>
39 );
40
41 return (
42 <div className="bg-white w-full min-h-screen flex items-center justify-center ">
43 <div>
44 <Button variant="contained" onClick={handleClick} size="large">
45 SnackBar 表示
46 </Button>
47 </div>
48 <Snackbar
49 open={open}
50 autoHideDuration={6000}
51 onClose={handleClose}
52 message="Snackbar"
53 action={action}
54 ContentProps={{
55 sx: {
56 background: "red",
57 color: "#03fc0f",
58 }
59 }}
60 />
61 </div>
62 );
63}
64以上、MUI Snackbarの色を変更するTipsでした。
お役に立てましたら幸いです。
ご一読頂き、ありがとうございました。