この記事はこんな人におすすめ
- MUI における Button(variant = contained)の立体化を停止したい
環境
React: 17.0.2
MUI: 5.5.2
Button の立体化の停止
MUI の Button の外観は3種類あり、variant に contained を指定した場合は、立体的に見えます。この立体化を停止するには disableElevation 属性を付加します。
variant に関する説明は「[MUI Tips][Button] Button の基本使用方法」を参照してください。
書式は以下の通りです。
<Button variant="contained" disableElevation>ボタン表面に表示する文字列</Button>
以下は、立体的なボタンと立体を停止したボタンを2つ並べて表示する例です。
import { Box, Button } from "@mui/material"; /// /// Button 立体化の停止 /// export default function ButtonSample4() { return ( <Box sx={{ '& button': { m: 1 } }}> <div> <Button variant="contained">立体的</Button> <Button variant="contained" disableElevation>平面的</Button> </div> </Box> ); }
MUI Tips 一覧
その他の MUI Tips 一覧はコチラを参照してください。
Please follow and like us:
コメント