如何从材料ui永久抽屉中删除垂直线

Posted 2023-04-13

【中文标题】如何从材料ui永久抽屉中删除垂直线

【英文标题】：how to remove vertical line from the marerial ui permanent drawer

【发布时间】：2021-08-08 14:52:58

【问题描述】：

我正在尝试从 material-UI 的永久抽屉中删除垂直线，请提供任何建议。

【参考方案1】：

<Drawer
        sx=
          width: drawerWidth,
          flexShrink: 0,
          '& .MuiDrawer-paper': 
            width: drawerWidth,
            boxSizing: 'border-box',
          ,
          border:"none"
        
        variant="permanent"
        anchor="left"
      >

我正在研究迷你变体抽屉，我添加了

border:"none"

在drawerOpen 和drawerClose 中，它都适用于我。

你可以试试上面的代码。

【参考方案2】：

看看withStyles HOC: https://material-ui.com/guides/typescript/#usage-of-withstyles 的覆盖样式 有关课程的完整列表，您可以查看：https://material-ui.com/api/drawer/ 你想要这样的东西：

const StyledDrawer = withStyles(theme => (
    // css classes overrides goes here
)(props => <Drawer ...props />);

【讨论】：

这是只在永久抽屉中的分隔线，但我不知道如何删除它（不知道它的确切道具）。

class paperAnchorDockedLeft 添加了border-right。以抽屉样式覆盖此类。像这样的东西： 并添加类似 paperAnchorDockedLeft: border: 'none' 的样式

【参考方案3】：

遇到同样的问题，希望解决方案对您来说还不算太晚。 要删除边框，只需将 "& .MuiDrawer-paper": borderWidth: 0 添加为您的 sx 属性的条目即可。

【讨论】：

感谢您的评论，问题已经解决了。

【参考方案4】：

定位PaperProps 以移除边框或进行背景修改。 <Drawer PaperProps=style: border: 'none'>...</Drawer> `