I don’t know why the Drawer component does not obey the styling rules I specified. I.e., its width it not 17rem, on the one hand, and, I don’t know why it exceeds its parent component borders, on the other hand. Here is the interesting code from the application:
const styles = {
background: {
display: 'flex',
//flexDirection: 'row',
height: '100vh',
width: '100vw',
backgroundColor: '#303030',
},
drawer: {
width: '17rem',
},
toolbar: {
justifyContent: 'space-between',
},
titles: {
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
},
btn: {
color: 'inherit',
outline: 'none',
fontWeight: 500,
},
}
function App() {
return (
<>
<AppBar style={{ position: 'relative', zIndex: '1201' }}>
<Toolbar style={styles.toolbar}>
<div style={styles.titles}>
<Typography variant='h5'>
Naughty pie
</Typography>
<Typography sx={{marginLeft: '1rem'}}>
@0.0.0
</Typography>
</div>
<div>
<Button style={styles.btn}>
<GroupIcon style={{ margin: '2px' }} />
USERS
</Button>
...
</div>
</Toolbar>
</AppBar>
<div style={styles.background}>
<Drawer variant='permanent' style={styles.drawer}>
<List>
<ListItemButton>
<ListItemText primary='All Messages' />
</ListItemButton>
</List>
</Drawer>
</div>
</>
)
}
2
Answers
What do you want to do? first of all, I should say it’s better to use a Box (import it from "@mui/material") component instead of a div HTML tag when you are using MUI and use an sx prop instead of a style prop
after that, look at your Drawer component, It has a "styles" prop, it is not correct, it should be style if you use it.
please give me more details about something you want to do.
Use this code.