MUI v5で背景のみ透明度を設定する方法

背景のみ透明度を設定する方法を備忘録として記載する。

sxのプロパティに”opacity”を設定すると透明度を設定することができるが、この場合だと子要素まで透明になってしまう。

const commonProp = {
  width: 300,
  height: 300,
};

export default function Page() {
  return (

      <Box
        position="absolute"
        zIndex={1}
        sx={{
          ...commonProp,
          backgroundColor: "warning.main",
          opacity: 0.5,
        }}
      >
        <Typography variant="h2">Box1</Typography>
      </Box>
      <Box
        position="absolute"
        sx={{
          ...commonProp,
          top: 50,
          left: 20,
          backgroundColor: "primary.main",
        }}
      >
        <Typography variant="h2">Box2</Typography>
      </Box>
  );
}

子要素も透明度が設定される。

解決策

カスタムカレーパレットを用意する。そこでalpha関数を使用して、カラーを設定する。
そのカラーをバックグラウンドカラーに使用することで、背景のみ透明度を設定することができる。

import {
  alpha,
} from "@mui/material";
import { amber } from "@mui/material/colors";

const customTheme = createTheme({
  palette: {
    opaWarning: {
      main: alpha(amber[700], 0.5),
    },
  },
});

const commonProp = {
  width: 300,
  height: 300,
};

export default function Page() {
  return (
    <ThemeProvider theme={customTheme}>
      <Box
        position="absolute"
        zIndex={1}
        sx={{
          ...commonProp,
          // backgroundColor: "warning.main",
          // opacity: 0.5,
          backgroundColor: "opaWarning.main",
        }}
      >
        <Typography variant="h2">Box1</Typography>
      </Box>
      <Box
        position="absolute"
        sx={{
          ...commonProp,
          top: 50,
          left: 20,
          backgroundColor: "primary.main",
        }}
      >
        <Typography variant="h2">Box2</Typography>
      </Box>
    </ThemeProvider>
  );
}

子要素は透明になっていない。