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

MUI Tips Button
MUI Tips
スポンサーリンク
スポンサーリンク

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

  • 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:

コメント