如何在Material UI中加粗Drawer组件的边框线条？

要给左侧Drawer添加突出的加粗边框，核心是给Drawer内部的MuiDrawer-paper容器设置边框样式。你可以通过修改sx属性里的嵌套选择器来实现，具体步骤如下：

1. 在& .MuiDrawer-paper的样式中添加边框属性，因为左侧Drawer的右侧是和主内容区的分界，所以设置borderRight更合理，你可以自定义宽度、样式和颜色：

sx={{
  width: drawerWidth,
  flexShrink: 0,
  '& .MuiDrawer-paper': {
    width: drawerWidth,
    boxSizing: 'border-box',
    // 这里添加边框样式，3px是宽度，solid是样式，#ccc是颜色可自定义
    borderRight: '3px solid #ccc',
  },
}}

2. 如果需要给其他边加边框，比如左侧或顶部，直接添加对应的borderLeft/borderTop等属性即可。

修改后的完整SideNav组件代码：

function SideNav({drawerWidth = 170}) { 
  const history = useHistory(); 
  const dispatch = useDispatch(); 

  return(
    <Drawer
      PaperProps={{ padding: '20px'}}
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: drawerWidth,
          boxSizing: 'border-box',
          // 加粗右侧边框，视觉上和主内容区分隔更明显
          borderRight: '3px solid #ddd',
        },
      }}
      variant="permanent"
      anchor="left"
    >
      <List>
        <ListItem >
          <img className="rotate" src="record1.png" width="80" height="80"/>
          <Button variant='outlined' onClick={() => history.push('/home')}> Home </Button>
        </ListItem>
        <ListItem >
          <img className="rotate" src="record1.png" width="80" height="80"/>
          <Button variant='outlined' onClick={() => history.push('/create')}>Create</Button>
        </ListItem>
        <ListItem>
          <img className="rotate" src="scratch.png" width="80" height="80" />
          <Button variant='outlined' onClick={() => dispatch({ type: 'LOGOUT' })}>Log out </Button>
        </ListItem>
        <ListItem>
          <img className="rotate" src="scratch.png" width="80" height="80" onClick={() => history.push('/profile')}/>
          <Button variant='outlined' onClick={() => history.push('/create')}>Profile </Button>
        </ListItem>
      </List>
      <Divider />
    </Drawer>
  );
}

export default SideNav;

说明：boxSizing: 'border-box'确保边框不会额外占用宽度，避免Drawer整体尺寸超出预期。你可以根据需求调整边框的宽度（比如4px）和颜色（比如主题色#1976d2）来匹配你的UI设计。

内容的提问来源于stack exchange，提问作者IcedLatte