reactjs - 样式选择列表项 Material UI V5

Question

我正在使用材料 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}`
          }
        }
      }
    }
  }
});

这是我的代码框：

关联

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>
  );
}

标签： reactjsmaterial-uiemotion

Answer 1

您的覆盖有两个问题：

1. 您ListItemButton在代码中使用没有ListItem哪个很好，但是您需要使用MuiListItemButton而不是MuiListItem主题中的组件名称。
2. 您曾经"&$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}`
          }
        }
      }
    }
  }
});