[React] Material-UI の ListItem のCSSカスタマイズについて

前提

Material-UIのListItemのselected状態のスタイルを変更したいと考えています。
以下はMaterial-UIより抜粋しています。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Divider from '@material-ui/core/Divider';
import InboxIcon from '@material-ui/icons/Inbox';
import DraftsIcon from '@material-ui/icons/Drafts';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default function SelectedListItem() {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem
          button
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItem>
      </List>
      <Divider />
      <List component="nav" aria-label="secondary mailbox folder">
        <ListItem
          button
          selected={selectedIndex === 2}
          onClick={(event) => handleListItemClick(event, 2)}
        >
          <ListItemText primary="Trash" />
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 3}
          onClick={(event) => handleListItemClick(event, 3)}
        >
          <ListItemText primary="Spam" />
        </ListItem>
      </List>
    </div>
  );
}

実現したいこと

makeStylesで当てようとしましたが、selectedの時のスタイルのあて方が分からず。
例えば、selectedの状態の時、背景色を黄色にするなど、makeStylesやcreateStylesのスタイルの当て方をご教授いただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

withStylesでスタイルをカスタマイズしたコンポーネントを作成できます。

javascript
1const MyListItem = withStyles({
2  root: {
3    '&$selected': {
4      background: 'red', // select時に背景を赤
5    },
6  },
7  selected: {},
8})(ListItem)

あとはListItemの代わりにMyListItemを設置してあげればいいです。
この"selected"というのはMaterial-UIのコンポーネントのページ下部「CSS」にあるRule nameです。
はじめは直接selectedに記述すればよいのかと思いましたがそれではダメみたいですね。
ドキュメントを読む感じ、Global classがMui-〇〇のものは直接書き換えるのではなく、上記のように中身を空にしてrootに&$〇〇の形で記述するようです。

投稿2021/08/04 03:36