前端项目实战叁佰肆拾叁react-admin和material ui-设置两栏布局

<Grid style={{ margin: 0, padding: 0, display: "flex" }} >
 
                <Grid style={{ width: "70px",margin: "12px 0 0 12px" }} >
                    {typeList && typeList.map((item: any, index: any) => (
                        <Paper >
                            <ListM component="div">
                                <ListItem button style={typeId == item.id ? { background: '#ccc',height:"30px"} : {height:"30px"}} onClick={() => handleSelectType(item.id)}>
                                    <ListItemText>{item.name}</ListItemText>
                                </ListItem>
                            </ListM>
                        </Paper>
                    ))}
                    <Card>
                    {/* <Tabs
                        orientation="vertical"
                        variant="scrollable"
                        value={typeId}
                        onChange={handleSelectTypeCheck}
                        sx={{ borderRight: 1, borderColor: 'divider' }}
                    >
                        {typeList && typeList.map((item: any, index: any) => (
                            <Tab value={item.id} label={item.name} />
                        ))}
                    </Tabs> */}
                    </Card>
                </Grid>
                <Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
                    <Paper>
                        <List hasCreate={true} filter={typeId ? { style_id: id, mat_id: typeId } : { style_id: id }} exporter={false} hasEdit={true} resource="t_base_style_materiel">
                            <MaterialTabChange typeId={typeId} value={value}></MaterialTabChange>
                        </List>
                    </Paper>
                </Grid>
 
            </Grid>

运行结果