如何在材质UI中覆盖抽屉

Question

在我的组件中，我需要覆盖css参数“ overflow-y”。在.MuiDrawer-paper类中描述了此参数。 通常要覆盖css是通过makeStyles来完成的。但是在此组件中有两个div。父容器和女儿div。当我设置类似的替代类时：

 const useStyles = makeStyles((theme) => ({
      paper: {
        overflowY: 'unset',
      },
    )};

...

className={classes.paper}

Parent div获取此类，没有任何意义。因为我需要重写女儿课。 我试图做这样的事情：

 className={{ paper: classes.paper }}

但是在这种情况下，班级选拔了……我该怎么办？

Answer 1

覆盖实质性ui类的正确方法是在classes组件上使用Drawer prop而不是className。

Read more about overriding classes

const useStyles = makeStyles((theme) => ({
      paper: {
        overflowY: 'unset',
      },
    )};
...
     <Drawer
        classes={{
          paper: classes.paper,
        }}
        anchor="left"
        open={open}        
     />

Answer 2

我有2个选择。

1. 使用!important

const useStyles = makeStyles((theme) => ({
  paper: {
    overflowY: 'unset !important',
  },
)};

1. 使用styles属性。

<Drawer style={{overflowY: 'unset'}} />

我更喜欢使用styles属性。