Question

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

所以我们有

from tkinter import *

}））;

并重做：

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

问题在于，将className应用于的样式添加到了元素的最后，这样它就不会覆盖原始样式：

class =“ MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed Hook-appBar-1b6f20g ”
>

我知道我可以使用内联样式，但是想知道是否可以像使用“旧版”组件方法那样使用带有钩子的classNames覆盖样式吗？

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

发生的事情是，在沙箱中，代码可以正常运行（左侧容器上的应用栏）

但是当下载并编译相同的项目时，这是不可行的：

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

在浏览器中，通过“运行启动”运行应用时，其位于顶部：

这就是区别，但是为什么以及如何解决呢？

Answer 1

原来我安装的新样式的bootstrap.js放在错误的位置。

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

install();

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

Answer 2

https://material-ui.com/ru/styles/advanced/#makestyles

const useStyles = makeStyles({
  root: {}, // a style rule
  label: {}, // a nested style rule
});

function Nested(props) {
  const classes = useStyles(props);
  return (
    <button className={classes.root}>
      <span className={classes.label}> // 'jss2 my-label'
        nested
      </span>
    </button>
  );
}

function Parent() {
  return <Nested classes={{ label: 'my-label' }} />
}

Answer 3

您可以使用classes道具而不是classNames覆盖Material-ui样式。

例如

<AppBar position="fixed" classes={{root: classes.appBar}}>

在这里，我使用了root键进行覆盖，还有许多其他键可以使用。

每个Material-ui组件都有一个api节。您将在此处获得覆盖键的列表。

一些有用的链接-

https://material-ui.com/customization/overrides/#overriding-with-classes

https://material-ui.com/api/app-bar/

如何使用钩子覆盖材料ui样式

3 个答案: