More than 1 year has passed since last update.

Material UI の sx prop の利用方法

Posted at 2022-11-08

sx propとは

sx prop とは, Material-uiのcomponentに対してスタイルを指定できるものです.
プレーンなhtmlでのインラインCSSのような感覚で使用できます.

sx propsに対応しているcomponentに対して、sx要素で指定します.

例

<Box sx={{ bgcolor:"#777" }}>
    Hello
</Box>

sxで利用できるプロパティの一例を記載します.

指定コンポーネントの周りに囲い線をつけます.

例

<Box sx={{ border: 1 }} >
    Hello
</Box>

表示/非表示を設定します.

例

<Box sx={{ display: 'none' }} >
    Hello
</Box>

縦幅および横幅を設定します.

例

<Box sx={{ width: 200 }} >
    Hello
</Box>

例

<Box sx={{ height: '250' }} >
    Hello
</Box>

指定には0-1の小数値が使え、その場合は自動的に%扱いとなります.
また、%表記も可能です.

例

<Box sx={{ width: 0.5 }} >
    Hello
</Box>
<Box sx={{ width: '50%' }} >
    Hello
</Box>