MaterialUIのsxの構文は
Emotionというもので作られています。
その例を以下に書きます。

box:hover {
background-color: blue;
}
.box .child {
font-weight: bold;
}

というものであれば

<Box
sx={{
backgroundColor: ‘red’,
‘&:hover’: { backgroundColor: ‘blue’ }, // ← hover時の指定
‘& .child’: { fontWeight: ‘bold’ }, // ← 子要素への指定
}}
>
<div className=”child”>text</div>
</Box>

子要素への指定ができたりしていることに注目して下さい。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

片桐 奏羽

アプリ開発をしながら物理を研究しています。

最新記事 by 片桐 奏羽 (全て見る)

• materialUIのsxの構文 - 2025年11月12日
• auth0でのsaml連携でのユーザID - 2025年8月21日
• ざっくりとACMの説明 - 2025年7月29日