[MUI Tips][Button] Button の立体化を停止する

Button

MUI Tips

2022.05.032022.05.25

この記事はこんな人におすすめ
環境
Button の立体化の停止
MUI Tips 一覧

この記事はこんな人におすすめ

MUI における Button（variant = contained）の立体化を停止したい

実行例

環境

React: 17.0.2
MUI: 5.5.2

Button の立体化の停止

MUI の Button の外観は３種類あり、variant に contained を指定した場合は、立体的に見えます。この立体化を停止するには disableElevation 属性を付加します。

variant に関する説明は「[MUI Tips][Button] Button の基本使用方法」を参照してください。

書式は以下の通りです。

<Button variant="contained" disableElevation>ボタン表面に表示する文字列</Button>

以下は、立体的なボタンと立体を停止したボタンを２つ並べて表示する例です。

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>

    );
}

実行例