Currently, my UI is powered by MUI.
I have various options displayed in the image below:
https://i.sstatic.net/YKoyV.png
Everything looks good so far. However, I wish to reposition the options container further down. (It is currently set at top: 64px which is the default).
I aim to change it to top : 100px. Once adjusted, it will appear as follows:
https://i.sstatic.net/s20yS.png
I attempted to implement this change using CSS, but it didn't take effect.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also experiment with it here: https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I prefer not to globally set top : 100px.