给MUI MenuItem添加divider出现多余边框，如何解决？

以下是几种实用的解决方式：

方式一：单个MenuItem直接用sx属性覆盖 #

针对出现问题的MenuItem，直接通过sx属性消除多余边框，如果是聚焦时的轮廓线，也一并处理：

<MenuItem divider sx={{
  border: 'none',
  // 若为聚焦时的轮廓边框，添加下面的样式
  '&:focus-visible': {
    outline: 'none'
  }
}}>
  菜单选项内容
</MenuItem>

方式二：用styled组件全局统一处理 #

如果多个MenuItem都存在这个问题，可以创建自定义的StyledMenuItem组件，统一消除divider项的多余边框：

import { styled } from '@mui/material/styles';
import MenuItem from '@mui/material/MenuItem';

const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
  '&[divider="true"]': {
    border: 'none',
    // 处理聚焦轮廓的话加上这部分
    '&:focus-visible': {
      outline: 'none'
    }
  }
}));

// 使用自定义组件
<StyledMenuItem divider>
  菜单选项内容
</StyledMenuItem>

方式三：检查全局样式冲突 #

有时候全局CSS会给列表项（li）或类似元素统一加边框，导致和MUI的样式冲突。可以通过全局样式给带divider的MenuItem例外：

/* 在全局样式文件中添加 */
.MuiMenuItem-root[divider="true"] {
  border: none !important;
}

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