Блог

У меня есть этот компонент, который содержит карту, и внутри этой карты есть элементы, и я хочу разделить их вертикальной линией, и проблема в том, что вертикальная линия не работает.

 const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        orange: {
            color: theme.palette.getContrastText(deepOrange[500]),
            backgroundColor: deepOrange[500],
        }
    }),
);


const SpaceForm: FC = (props) => {

    const classes = useStyles()
    const workspaceData = useWorkspaceModule((state) => state.workspace)

    console.log("inside component 1: ", workspaceData);


    return (
        <>
            <Grid
                container
                spacing={3}
            >
                <Grid
                    item
                    lg={8}
                    md={6}
                    xs={12}
                >
                    <Card>
                        <CardHeader title="Name your Workspace:"/>
                        <CardContent>

                            <Avatar style={{width: '3.4rem', height: '3.4rem'}} className={classes.orange}>N</Avatar>
                        {/*llll*/}
                            <Divider style={{ backgroundColor:'red'}} orientation="vertical" flexItem />
                        </CardContent>
                    </Card>

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

export default SpaceForm;
 

Вы просто завернете Avatar внутрь гибкого Box трубопровода, и он покажет разделитель после аватара:

   <Box display="flex">
    <Avatar
      style={{ width: "3.4rem", height: "3.4rem" }}
      className={classes.orange}
    >
      N
    </Avatar>
    {/*llll*/}
    <Divider
      style={{ backgroundColor: "red" }}
      orientation="vertical"
      flexItem
    />
  </Box>