如何使用 hooks 覆盖 Material ui 样式

我尝试使用类名使用 React Hooks 和 Material Ui 创建剪切到页面顶部的 AppBar 并将鼠标悬停在其他抽屉上。全部如以下所述：https://material-ui.com/demos/drawers/#clipped-under-the-app-bar https://material-ui.com/demos/drawers/#clipped-under-the-app-bar

所以我们有

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',
    },
},

}));

并更红：

     <div className={classes.root}>
                <CssBaseline/>
                <LoadingResults showLoading={showLoadingSpinner}/>
                <AppBar position="fixed" className={classes.appBar} >
                     ...
                </AppBar>
    ....

问题是使用 className 应用的样式添加到元素的最后，因此它不会覆盖原始样式：

class="MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed挂钩-appBar-1b6f20g"

我知道我可以使用内联样式，但想知道我是否可以使用带钩子的 classNames 覆盖样式，就像使用“传统”组件方法一样？

这是沙箱：https://codesandbox.io/s/w7njqorzy7?fontsize=14 https://codesandbox.io/s/w7njqorzy7?fontsize=14

What happens is that in sandbox the code works ok (appbar over lefthand side container)

But when the same project is downloaded and compiled it's not ok:

查看调试器，样式是内联的。 在沙盒中，钩子位于底部：

在浏览器中，当应用程序通过“run start”运行时，它位于顶部：

这就是差异，但是为什么以及如何解决这个问题？

事实证明，我安装新样式的 bootstrap.js 位置错误。

import { install } from '@material-ui/styles';

install();

应在导入任何材质 ui 组件之前执行。