React中MUI组件自定义CSS样式失效，元素无类名问题求助

我刚学React，尝试通过className给MUI组件加自定义CSS，但样式没效果。用F12检查元素时，完全找不到navigation或navibar这两个类名。想问下我加CSS的方式是不是错了？还有哪些步骤没做？

我的TSX代码 #

export default function NaviDispatcher(): JSX.Element {

    const [value, setValue] = React.useState(0);

    return (<Paper elevation={3} className='navigation'>
        <BottomNavigation
            showLabels
            value={value}
            onChange={(event, newValue) => {
                setValue(newValue);
            }}
            className='navibar'
        >
            <BottomNavigationAction style={label}  label="Box Management" />
            <BottomNavigationAction style={label}  label="Deliveries Management" />
            <BottomNavigationAction style={label}  label="Users Management" />
            <BottomNavigationAction style={label}  label="Deliverer Management" />
            <BottomNavigationAction style={label}   label="Create New Delivery" />
        </BottomNavigation>
    </Paper>);
}

我的CSS代码 #

.navigation {
    display: flex;
    flex-direction: row;
    background-color: black;
}

.navibar {
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
}

元素检查截图 #

• 确认CSS文件已正确导入：在NaviDispatcher.tsx顶部必须导入对应的CSS文件，比如：

  import './你的样式文件名.css';
  

  未导入的话，CSS规则不会被加载，组件上的className也无法关联到样式。

• 检查是否启用CSS Modules：如果项目是Create React App这类默认启用CSS Modules的结构，若CSS文件命名为xxx.module.css，则需要这样使用：

  import styles from './xxx.module.css';
  // ...
  <Paper elevation={3} className={styles.navigation}>
  

  这种模式下原始类名会被编译成带哈希的独特类名，直接写字符串'navigation'找不到对应类。

• 确认组件挂载与className支持：MUI的Paper和BottomNavigation都支持className属性，会将类名附加到根元素。如果仍看不到类名，检查NaviDispatcher组件是否被正确挂载到页面中（比如在App组件里是否引入该组件）。

• 处理样式优先级问题：若后续能看到类名但样式不生效，是因为MUI内置样式优先级更高，可通过以下方式解决：

  • 提高自定义选择器特异性，比如写成.MuiPaper-root.navigation
  • 临时用!important测试（不推荐长期使用）
  • 改用MUI官方推荐的样式方案，比如Styled Components、Emotion，或使用MUI的sx属性

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