在material ui使用样式中使用同级组合器

/* 选择紧邻的兄弟元素 */
.element1 + .element2 {
  /* 样式规则 */
}

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 Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles((theme) => ({
  listItem: {
    '& + &': {
      borderLeft: `2px solid ${theme.palette.primary.main}`,
    },
  },
}));

function MyList() {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(0);

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

  return (
    <List>
      {[0, 1, 2].map((value) => {
        const labelId = `checkbox-list-label-${value}`;

        return (
          <ListItem
            key={value}
            button
            className={selectedIndex === value ? classes.listItem : ''}
            onClick={(event) => handleListItemClick(event, value)}
            aria-labelledby={labelId}
          >
            <ListItemIcon>
              <Checkbox edge="start" checked={selectedIndex === value} tabIndex={-1} disableRipple />
            </ListItemIcon>
            <ListItemText id={labelId} primary={`List item ${value}`} />
          </ListItem>
        );
      })}
    </List>
  );
}

export default MyList;