在 Material UI BottomNavigationAction 上添加伪元素

Question

我一直在尝试添加一个伪元素，以便向所选项目添加一个额外的 UI 元素。它看起来像这样（位于菜单项上方的行）

这是我的代码，由于某种原因无法正常工作（该行未显示）

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            '& .MuiButtonBase-root.MuiBottomNavigationAction-root.Mui-selected': {
                '&::before': {
                    content: '',
                    display: 'inline-block',
                    width: '32px',
                    height: '3px',
                    position: 'absolute',
                    top: 0,
                    zIndex: 100,
                    background: theme.palette.primary.main,
                },
            },
    })
);

const TabBar: React.FC<IProps> = ({ value, handlePath }) => {
    const { root } = useStyles();

    return (
        <Container maxWidth="sm" className={root}>
            <BottomNavigation value={value} onChange={handlePath} showLabels>
                <BottomNavigationAction
                    label="Home"
                    value={Routes.HOME}
                    icon={<HomeIcon isActive={Routes.HOME === value} />}
                />
               //others tabs
            </BottomNavigation>
        </Container>
    );
};

Answer 1

用单引号括起 content。

content: '""'

在 Material UI BottomNavigationAction 上添加伪元素

Add pseudo-element on Material UI BottomNavigationAction

css

reactjs

material-ui

pseudo-element