如何在 React 中添加 css 样式，特别是对于 MUI 组件答案

【问题标题】：How to add css style in react espically for MUI component如何在 React 中添加 css 样式，特别是对于 MUI 组件
【发布时间】：2022-11-19 19:32:11
【问题描述】：

刚开始学习react，现在准备使用css样式，在className中使用，自定义Mui组件。但它不起作用。这是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%;
}

当我按 F12 检查元素时，我没有找到任何由导航或导航栏命名的元素。我添加css样式的时候错了吗？还有什么我应该做的吗？

【问题讨论】：

标签： css reactjs typescript

【解决方案1】：

由于您使用的是 MUI，您是否在 css 文件中从“@material-ui/core”导入了{makeStyles}？在你的 tsx 文件中你应该这样做：

const classes = useStyles()
<Paper elevation={3} className={classes.navigation}>

【讨论】：