如何在带有Mui-disabled类的禁用列表项中启用内部按钮

方法1：CSS强制覆盖按钮交互属性 #

Mui-disabled类默认会给所有子元素添加pointer-events: none属性阻断交互，同时降低不透明度，你可以给需要保持启用的按钮添加自定义样式覆盖默认规则：

• 全局CSS写法：

/* 给目标按钮添加自定义类名keep-enabled */
.Mui-disabled .keep-enabled {
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

• MUI内联sx属性写法（无需!important）：

<ListItem disabled>
  {/* 其他被禁用的列表内容 */}
  <Button 
    sx={{
      pointerEvents: 'auto',
      opacity: 1,
      cursor: 'pointer'
    }}
    onClick={yourClickHandler}
  >
    可正常点击的按钮
  </Button>
</ListItem>

方法2：调整DOM结构脱离禁用上下文 #

如果不想使用样式覆盖，可以调整结构避免继承：

• 将不需要交互的列表内容单独套一层容器，只给这层容器加disabled属性，按钮和该容器平级放置
• 使用MUI的Portal组件将按钮挂载到DOM树的其他节点，完全脱离父元素的禁用作用域

方法3：手动实现列表项禁用逻辑 #

不使用MUI组件自带的disabled属性，自己定义禁用样式只作用在需要禁用的元素上，全局不添加pointer-events: none规则，按钮自然不会被影响。

注意事项 #

• 使用样式覆盖时需要保留按钮的可访问性，手动设置tabIndex={0}保证键盘可以正常聚焦操作
• 如果父元素使用了原生disabled属性，部分浏览器会强制禁用所有子表单元素，需要删掉原生属性仅用类名控制样式

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