Material ui 在剖面之间添加垂直线，并确保这些线为红色

如何在三列之间，即三个部分之间添加“垂直线”。 也就是说，我想在第一节和第二节之间添加一个云，并在第二节和第三节之间添加一列

这个文件的设计是为了设计图中所示的界面，并添加了三个部分，每个部分包含许多元素

import type {FC} from 'react';
import {
    Box, Button,
    Card,
    CardContent,
    CardHeader,
    List,
    ListItem,
    Avatar,
    ListItemIcon,
    ListItemAvatar,
    ListItemText,
    Grid
} from '@material-ui/core';
import InboxIcon from '@material-ui/icons/Inbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import Divider from '@material-ui/core/Divider';
import {makeStyles} from "@material-ui/core/styles";
import {blue} from "@material-ui/core/colors";

const useStyles = makeStyles((theme)=>({

    driver:{
        // border: '0.25px solid #e9ebf0'
        background: '#e9ebf0'
        // background: theme.palette.divider,
    }
}));

const WorkspacesInviteUser: FC = (props) => {

    const classes = useStyles();
    return (<>
        <Card style={{maxWidth: '35rem',minWidth: '35rem', borderRadius: '0.6rem', background: '#fff' 
             }}>
            <Grid
                container
                spacing={0}
                xs={12}
                md={12}
            >
                {/*first Column*/}
                <Grid container item xs={2} style={{ backgroundColor: 'blue', paddingBottom:'5rem', 
                    paddingTop:'0.5rem'}}>
                    {/*                 Avatar*/}
                </Grid>
                <Divider orientation="horizontal" variant="fullWidth" className={classes.driver}/>

                {/*second Column*/}
                <Grid container item xs={5} style={{backgroundColor: 'blue', 
                    paddingBottom:'5rem',paddingTop:'0.5rem'}}>
                    <List component="nav" aria-label="main mailbox folders" style={{ paddingLeft: 
                        '1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
                        <ListItem button style = {{
                            fontWeight: 500,
                            fontSize: '11px',
                            lineHeight: 1,
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            color: '#292d34'
                        }}>
                            <ListItemAvatar>
                                <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
                            </ListItemAvatar>
                            <ListItemText>Ali Baba {/*Workspaces*/}</ListItemText>
                        </ListItem>

                        <ListItem button>
                            <ListItemText primary="Settings"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Import/Export"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="People"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Spaces"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Integrations"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Template Center"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Trash"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Security & Permissions"/>
                        </ListItem>
                    </List>

                </Grid>
                {/*Third Column*/}
                <Grid container item xs={5} style={{backgroundColor: 'blue', paddingBottom:'5rem', 
                    paddingTop:'0.5rem'}}>
                    <List component="nav" aria-label="main mailbox folders" style={{paddingLeft: 
                        '1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
                        <ListItem button>
                            <ListItemAvatar>
                                <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
                            </ListItemAvatar>
                            <ListItemText>Ali Baba</ListItemText>
                        </ListItem>

                        <ListItem button>
                            <ListItemText primary="My Settings"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Notifications"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Layout size & style"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Rewards"/>
                        </ListItem>

                    </List>

                    <Divider  variant="middle"/>

                    <List component="nav" aria-label="main mailbox folders" style={{paddingLeft: 
                       '1rem' , fontSize: '12px' , color: '#292d34', lineHeight: 1}}>
                        <ListItem button divider>
                            <ListItemText primary="Log out"/>
                        </ListItem>


                        <ListItem button>
                            <ListItemText primary="Help"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Hotkeys"/>
                        </ListItem>
                        <ListItem button>
                            <ListItemText primary="Dark mode"/>
                        </ListItem>

                    </List>

                </Grid>

            </Grid>
        </Card>
    </>)
};

export default WorkspacesInviteUser;

从'react'导入类型{FC}；
进口{
盒子，按钮，
卡片
卡片内容，
万向节，
列表
列表项，
阿凡达
ListItemIcon，
ListItemAvatar，
ListItemText，
网格
}来自“@material ui/core”；
从“@material ui/icons/Inbox”导入Inboxion；
从“@material ui/icons/Drafts”导入DraftsIcon；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/colors”导入{blue}”；
const useStyles=makeStyles（（主题）=>({
司机：{
//边框：“0.25px固体#e9ebf0”
背景：“#e9ebf0”
//背景：theme.palete.divider，
}
}));
常量工作空间管理员：FC=（道具）=>{
const classes=useStyles（）；
返回(
{/*第一列*/}
{/*化身*/}
{/*第二列*/}
阿里巴巴{/*工作区*/}
{/*第三列*/}
阿里巴巴
)
};
导出默认工作空间虚拟用户；

您可以添加borderRight={1}，您可以从文档中获益：

---

你会得到你想要的。

嗨！你能在沙盒中在线复制它吗？为什么添加边框不起作用？我如何添加它？你能编辑代码吗？