前端项目实战肆拾叁-​react-admin+material ui-踩坑-第贰层

<Grid style={{ margin: 0, padding: 0, display: "flex" }} >
            <Grid style={{ width: "200px", margin: "24px 0 0 24px" }} >
                <Paper>
                    {categoryProdList && categoryProdList.map((item: any, i) => (
                        <Fragment key={'main' + i}>
                            <ListItem button onClick={()=>
handleClick(item.id)}>
                                <ListItemText primary={item.category_name} />
                                {open ? <ExpandLess /> : <ExpandMore />}
                            </ListItem>
                            {item.t_prod_style.map((detailItem: any, j: any) => (
                                <Collapse in={open} timeout="auto" unmountOnExit>
                                    <ListM style={{ margin: "0px 0px 0 
24px" }} component="div">
                                        <ListItem button >
                                            <ListItemText primary=
{detailItem.style_name} />
                                        </ListItem>
                                    </ListM>
                                </Collapse>
                            ))}
                        </Fragment>
                    ))}
                </Paper>
            </Grid>
            <Grid style={{ flexGrow: "1", margin: "24px 0 0 24px" }} >
                    <Routes>
                        <Route path="demo/t_prod_category/:code" 
element={<CategoryListData/>}></Route>
                        <Route path="demo/t_prod_style/:code" 
element={<CategoryListData/>}></Route>
                    </Routes>
            </Grid>
        </Grid>