🐙

MUI(material-UI)のListItemTextのテキストのスタイルを変更する方法

2021/10/14に公開

環境

"@mui/material": "^5.0.1"

ListItemTextってなに?

https://mui.com/api/list-item-text/

ListItemTextは、MUIでリストを作るときにテキスト部分で使用するコンポーネントです。
下記のコードのように記述して使用します。

 <ListItem disablePadding>
    <ListItemButton>
      <ListItemText primary="Trash" />
    </ListItemButton>
  </ListItem>

https://mui.com/components/lists/

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',
       }}
     />

https://mui.com/components/lists/#customization

Typographyを使用したい場合の方法

上の方法ではなく、テキストはTypographyを使用してスタイルを変更したい場合は、以下のように書くことが出来ます。

<ListItemText
        disableTypography
        primary={<Typography variant="body1" style={{ color: 'red' }}>テキストの色は何?</Typography>}
      />

Discussion