How to add css style in react espically for MUI component

Question

I just start to learning react, now I'm going to use css style and use it in className for customizing the Mui component. But it doesn't work. Here is the code in 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>);
}

Here is the code in css.

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

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

When I check the element by F12, I didn't find any element named by navigation or navibar. Did I wrong when I add css style? Is there somethingelse I should do?

Answer 1

since you are using MUI, have you imported {makeStyles} from '@material-ui/core' in your css file? in you tsx file you should do this:

 xport default function NaviDispatcher(): JSX.Element { const [value, setValue] = React.useState(0); const classes = useStyles() return (<Paper elevation={3} className={classes.navigation}> <BottomNavigation showLabels value={value} onChange={(event, newValue) => { setValue(newValue); }} className={classes.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>); }

 import { makeStyles } from '@material-ui/core' export default makeStyles((theme) => ({.navigation { display: flex; flex-direction: row; background-color: black; }.navibar { display: flex; flex-direction: column; position: fixed; width: 100%; } } ))