🐙
MUI(material-UI)のListItemTextのテキストのスタイルを変更する方法
環境
"@mui/material": "^5.0.1"
ListItemTextってなに?
ListItemText
は、MUIでリストを作るときにテキスト部分で使用するコンポーネントです。
下記のコードのように記述して使用します。
<ListItem disablePadding>
<ListItemButton>
<ListItemText primary="Trash" />
</ListItemButton>
</ListItem>
ListItemText
では、propsのprimaryにテキストを渡します。またsecondaryにテキストを渡すことを可能です。
普通にスタイルを変えようとしてみる
例えばテキストのcolorをredに変更しようと以下のように書いても、テキストカラーは変更されません。
<ListItemText primary="テキストの色は何?" sx={{ color: red; }} />
公式ドキュメントに書いてある方法
MUIの公式ドキュメントによると、以下のコードのようにprimaryTypographyProps
を使用することでテキストのスタイルを変更することが出来ます!
secondaryのテキストのスタイルを変更する場合は、secondaryTypographyProps
を使用します。
<ListItemText
primary="Project Overview"
primaryTypographyProps={{
color: 'primary',
fontWeight: 'medium',
variant: 'body2',
}}
/>
Typographyを使用したい場合の方法
上の方法ではなく、テキストはTypographyを使用してスタイルを変更したい場合は、以下のように書くことが出来ます。
<ListItemText
disableTypography
primary={<Typography variant="body1" style={{ color: 'red' }}>テキストの色は何?</Typography>}
/>
Discussion