MUI Paper容器外部::before伪元素被部分截断无法正常显示问题

核心原因 #

箭头伪元素被截断是因为.MuiPaper-root容器本身或其上层父容器设置了overflow: hidden/overflow: auto等非visible属性，超出容器边界的内容会被强制裁剪，该限制优先级高于z-index设置。

解决方案 #

方案1：修改Paper容器的overflow属性 #

如果你的下拉菜单没有内容滚动需求，直接给.MuiPaper-root添加overflow: visible即可，这是成本最低的解决方案：

const useStyles = makeStyles(theme => ({
  root: {
    left: '5rem !important',
    '& .MuiPaper-root': {
      overflow: 'visible !important', // 新增该行配置
      '&::before': {
        position: 'absolute',
        left: '4rem',
        display: 'inline-block',
        top: '-3.9rem',
        fontSize: '5rem',
        fontFamily: 'Material Icons',
        content: '"arrow_drop_up"',
        color: 'red',
        zIndex: '5 !important',
      },
    },
  },
}));

方案2：将伪元素挂载到外层无裁剪的容器 #

如果下拉菜单需要保留滚动能力，不能修改.MuiPaper-root的overflow属性，可以将箭头伪元素移到外层的Menu根容器（也就是你自定义的root类）上，避开overflow裁剪上下文：

const useStyles = makeStyles(theme => ({
  root: {
    left: '5rem !important',
    position: 'relative', // 新增，作为伪元素的定位父级
    '&::before': { // 伪元素样式移到此处
      position: 'absolute',
      left: '4rem',
      display: 'inline-block',
      top: '-0.1rem', // 可根据实际显示效果调整该值适配位置
      fontSize: '5rem',
      fontFamily: 'Material Icons',
      content: '"arrow_drop_up"',
      color: 'red',
      zIndex: '5 !important',
    },
    '& .MuiPaper-root': {
      // 原有伪元素样式删除即可
    },
  },
}));

方案3：通过内边距预留箭头显示空间 #

如果前两种方案都不满足需求，可以给.MuiPaper-root添加顶部内边距容纳箭头，再调整内部内容的偏移抵消内边距的视觉影响：

const useStyles = makeStyles(theme => ({
  root: {
    left: '5rem !important',
    '& .MuiPaper-root': {
      paddingTop: '4rem !important', // 新增顶部内边距预留箭头位置
      '& > *': {
        marginTop: '-4rem !important', // 内部内容向上偏移抵消内边距
      },
      '&::before': {
        position: 'absolute',
        left: '4rem',
        display: 'inline-block',
        top: '0', // 调整top值到预留的内边距区域
        fontSize: '5rem',
        fontFamily: 'Material Icons',
        content: '"arrow_drop_up"',
        color: 'red',
        zIndex: '5 !important',
      },
    },
  },
}));

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