React中Material-UI makeStyles伪类不生效，求修复方案

1. listItemText 的 &:first-child 不生效 #

原因 #

ListItemText 并非其父元素（ListItem）的第一个子节点——当存在 ListItemIcon 时，图标组件会成为第一个子元素，导致 :first-child 伪类无法匹配到文本组件。此外，ListItemText 的 inset 自带内边距样式可能覆盖自定义样式。

修复方案 #

如果是要给第一个侧边栏项的文本加特殊内边距，建议在父组件中给第一个 SidebarItem 添加专属类，再通过嵌套选择器定位：

// 样式文件中添加
firstItem: {
  '& $listItemText': {
    paddingLeft: theme.spacing(5)
  }
}

// 父组件渲染 SidebarItem 时
{links.map((link, idx) => (
  <SidebarItem 
    key={link.path}
    className={idx === 0 ? classes.firstItem : ''}
    // 其他 props
  />
))}

如果是通过 inset 控制内边距，直接根据 inset 条件添加类更可靠：

// 样式文件
listItemText: {
  paddingLeft: theme.spacing(1.5),
},
insetText: {
  paddingLeft: theme.spacing(5)
}

// SidebarItem 中
<ListItemText 
  className={`${classes.listItemText} ${inset ? classes.insetText : ''}`}
  inset={inset}
  primary={link.title}
/>

2. linkItem 的 &:focus 不生效 #

原因 #

• Link 组件设置了 tabIndex="-1"，该属性会将元素移出键盘聚焦流，只能通过代码强制聚焦，无法通过点击或 Tab 键触发自然聚焦。
• 内层的 ListItem（带 button 属性）会捕获点击和聚焦状态，焦点实际落在 ListItem 而非外层 Link 上。

修复方案 #

移除 tabIndex="-1"，并将聚焦样式应用到 ListItem 上：

// 样式文件添加
listItem: {
  '&:focus': {
    outline: 'none'
  }
}

// SidebarItem 中
<ListItem button className={classes.listItem} onClick={handleItemClick}>

3. sidebarList 的嵌套选择器 & > div 不生效 #

原因 #

sidebarList 包裹的直接子元素可能不是 div——比如使用 Material-UI 的 List 组件时，它会渲染为 ul 标签，导致 & > div 无法匹配到目标元素。

修复方案 #

检查实际 DOM 结构，调整选择器匹配正确的子元素。如果是 List 组件，可通过 Material-UI 的类名定位：

sidebarList: {
  transition: 'width 0.2s ease',
  marginRight: '0px',
  width: '300px',
  // 匹配 Material-UI List 组件
  '& > .MuiList-root': {
    width: 'inherit',
    marginTop: '100px',
    backgroundColor: '#212121',
    borderRight: 'none'
  },
  '&.mini': {
    transition: 'width 0.2s ease',
    width: '0px',
    '& > .MuiList-root': {
      width: 'inherit'
    }
  }
}

通用注意事项 #

• 始终通过浏览器开发者工具检查 DOM 结构和样式优先级，确认自定义样式是否被 Material-UI 内置样式覆盖。
• 若样式优先级不足，可通过增加选择器嵌套层级（如 & .MuiListItemText-root）提升 specificity，避免滥用 !important。

内容的提问来源于stack exchange，提问作者Max Kipish