样式选择列表项 Material UI V5答案

【问题标题】：Style selected list-item Material UI V5样式选择列表项 Material UI V5
【发布时间】：2021-10-08 20:45:55
【问题描述】：

我正在使用材料 V5。如何设置所选列表项的样式？我想要一个 5px 的borderLeft。

类似这样的：

const theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: colors.primary
      // dark: will be calculated from palette.primary.main,
    }
  },
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          "&$selected": {
            borderLeft: `5px solid ${colors.primary}`
          }
        }
      }
    }
  }
});

这是我的密码箱：

Link

import * as React from 'react';
import Box from '@material-ui/core/Box';
import List from '@material-ui/core/List';
import ListItemButton from '@material-ui/core/ListItemButton';
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';

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

  const handleListItemClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
    index: number,
  ) => {
    setSelectedIndex(index);
  };

  return (
    <Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItemButton
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </ListItemButton>
        <ListItemButton
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="Drafts" />
        </ListItemButton>
      </List>
      <Divider />
      <List component="nav" aria-label="secondary mailbox folder">
        <ListItemButton
          selected={selectedIndex === 2}
          onClick={(event) => handleListItemClick(event, 2)}
        >
          <ListItemText primary="Trash" />
        </ListItemButton>
        <ListItemButton
          selected={selectedIndex === 3}
          onClick={(event) => handleListItemClick(event, 3)}
        >
          <ListItemText primary="Spam" />
        </ListItemButton>
      </List>
    </Box>
  );
}

【问题讨论】：

标签： reactjs material-ui emotion

【解决方案1】：

您的覆盖有两个问题：

您在代码中使用 ListItemButton 而不使用 ListItem 这很好，但是您需要使用 MuiListItemButton 而不是 MuiListItem 作为主题中的组件名称。
您使用"&$selected" 来引用选定的状态，但这应该是"&.Mui-selected"。

来自https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion：

尽管您在主题中定义的样式覆盖可能会部分起作用，但嵌套元素的样式有一个重要区别。 JSS 使用的 $ 语法不适用于 Emotion。您需要将这些选择器替换为有效的类选择器。

工作版本如下所示：

const theme = createTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: colors.primary
      // dark: will be calculated from palette.primary.main,
    }
  },
  components: {
    MuiListItemButton: {
      styleOverrides: {
        root: {
          "&.Mui-selected": {
            borderLeft: `5px solid ${colors.primary}`
          }
        }
      }
    }
  }
});

【讨论】：