如何为Material UI的BottomNavigationAction添加伪元素实现选中项顶部指示线

无法生效的核心原因 #

• 选中的BottomNavigationAction根元素默认未设置position: relative，伪元素的position: absolute会向上查找第一个带有定位属性的父元素，大概率定位到了外层容器而非导航项本身，导致指示线出现在可视区域外
• 伪元素未设置水平偏移属性，就算正常渲染也不会居中对齐导航项
• 特殊场景：如果项目存在全局样式覆盖、MUI版本差异导致类名变动，也可能出现选择器不匹配的问题

修正后的代码 #

首先修改样式定义：

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& .MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected': {
                // 新增相对定位，作为伪元素的定位父级
                position: 'relative',
                '&::before': {
                    content: '',
                    display: 'inline-block',
                    width: '32px',
                    height: '3px',
                    position: 'absolute',
                    top: 0,
                    // 新增水平居中配置
                    left: '50%',
                    transform: 'translateX(-50%)',
                    zIndex: 100,
                    background: theme.palette.primary.main,
                },
            },
    })
);

组件部分无需修改，保存后即可看到选中项顶部出现居中的指示线。

可选排查项 #

如果修改后仍不生效，可按以下步骤排查：

• 打开浏览器控制台元素面板，选中选中状态的BottomNavigationAction，查看类名是否和选择器匹配，以及伪元素是否正常生成
• 确认z-index值足够大，不会被其他元素遮挡
• MUI v5以上版本如果使用styled替代makeStyles，需要调整样式写法适配新的API

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