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

【问题标题】：how to remove vertical line from the marerial ui permanent drawer如何从材料ui永久抽屉中删除垂直线
【发布时间】：2021-08-08 14:52:58
【问题描述】：

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

【问题讨论】：

标签： reactjs material-ui drawer

【解决方案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> `

【讨论】：