如何给Material-UI Drawer内List的ListItem按钮添加独立className？

问题背景 #

我需要给Drawer组件内List里的每个ListItem按钮添加独立的className，方便单独控制每个按钮。目前通过循环生成了3个ListItem，但不知道该在哪里加className，附上代码和按钮效果截图：

原代码：

return (
    <Box
        sx={{
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
            height: "100%",
            overflow: "hidden",
        }}
    >
        <Drawer
            variant="permanent"
            anchor="left"
            hideBackdrop
            sx={{
                width: DRAWER_WIDTH,
                flexShrink: 0,
                ".MuiPaper-root": {
                    bgcolor: "info.main",
                    width: DRAWER_WIDTH,
                    position: "absolute",
                    height: "100%",
                },
            }}
        >
            <List>
                {Object.values(Types.InputMode).map((v) => (
                    <Fragment key={v}> 
                
                        <ListItem
                            button
                            onClick={() => setView(v)}
                            
                            sx={{ bgcolor: v === view ? "action.selected" : undefined }}
                        >
                            {v}
                        </ListItem>
                    </Fragment>
                ))}
            </List>
        </Drawer>
        <Route path={path + Types.InputRoutes[Types.InputMode.Create]}>
            <CreateProject />
        </Route>
        <Route path={path + Types.InputRoutes[Types.InputMode.Open]}>
            <OpenProject />
        </Route>
        <Route path={path + Types.InputRoutes[Types.InputMode.Import]}>
            <ImportProject />
        </Route>
    </Box>
);

按钮效果截图：

解决方案 #

直接在ListItem组件上添加className属性即可，利用循环中的枚举值v作为唯一标识，有两种常见写法：

1. 直接使用枚举值作为className：

<ListItem
    button
    onClick={() => setView(v)}
    className={v} // 这里添加className，值为当前枚举值
    sx={{ bgcolor: v === view ? "action.selected" : undefined }}
>
    {v}
</ListItem>

这样每个ListItem会分别获得Create、Open、Import这三个独立的className。

2. 添加统一前缀避免类名冲突：
   如果担心枚举值和其他类名重复，可以给className加前缀：

<ListItem
    button
    onClick={() => setView(v)}
    className={`input-mode-${v}`} // 生成类似input-mode-Create的类名
    sx={{ bgcolor: v === view ? "action.selected" : undefined }}
>
    {v}
</ListItem>

修改后的完整代码 #

return (
    <Box
        sx={{
            display: "flex",
            justifyContent: "space-between",
            width: "100%",
            height: "100%",
            overflow: "hidden",
        }}
    >
        <Drawer
            variant="permanent"
            anchor="left"
            hideBackdrop
            sx={{
                width: DRAWER_WIDTH,
                flexShrink: 0,
                ".MuiPaper-root": {
                    bgcolor: "info.main",
                    width: DRAWER_WIDTH,
                    position: "absolute",
                    height: "100%",
                },
            }}
        >
            <List>
                {Object.values(Types.InputMode).map((v) => (
                    <Fragment key={v}> 
                        <ListItem
                            button
                            onClick={() => setView(v)}
                            className={v} // 新增的className属性
                            sx={{ bgcolor: v === view ? "action.selected" : undefined }}
                        >
                            {v}
                        </ListItem>
                    </Fragment>
                ))}
            </List>
        </Drawer>
        <Route path={path + Types.InputRoutes[Types.InputMode.Create]}>
            <CreateProject />
        </Route>
        <Route path={path + Types.InputRoutes[Types.InputMode.Open]}>
            <OpenProject />
        </Route>
        <Route path={path + Types.InputRoutes[Types.InputMode.Import]}>
            <ImportProject />
        </Route>
    </Box>
);

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