My goal is to create an AppBar that is clipped to the top of the page and hovers over another Drawer using React Hooks and Material Ui by applying a class name. I followed the example provided at: https://material-ui.com/demos/drawers/#clipped-under-the-app-bar
Here is the code snippet:
const useStyles = makeStyles(theme => ({
root: {
display: 'flex',
height: '100%',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
menuButton: {
marginRight: 20,
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
}));
And the render function:
<div className={classes.root}>
<CssBaseline/>
<LoadingResults showLoading={showLoadingSpinner}/>
<AppBar position="fixed" className={classes.appBar} >
...
</AppBar>
....
The issue I am facing is that when the style is applied with the class name, it is added as the last element which prevents it from overriding the original style:
class="MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed Hook-appBar-1b6f20g"
I am aware that inline styles can be used but I am curious if there is a way to override styles using class names with hooks similar to the "legacy" component approach?
Here is the sandbox for reference: https://codesandbox.io/s/w7njqorzy7?fontsize=14
In the sandbox environment, the code works fine (AppBar over the lefthand side container): https://i.sstatic.net/0HmFu.png
However, when the same project is downloaded and compiled, the layout is not correct: https://i.sstatic.net/vQdkv.png
Upon inspecting the debugger, I noticed that the styles are inline. In the sandbox, hooks appear at the bottom:
https://i.sstatic.net/wBweo.png
But in the browser, when the app is run via "run start," they appear on top:
https://i.sstatic.net/TXy7h.png
This seems to be the root cause of the difference in behavior between the two environments. However, I am unsure why this happens and how to resolve it.