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>
    );

I am trying to add class names to a list within a drawer to be able to call each button within the list separately. I am struggling on where I can add classNames for these 3 buttons. Any help would be appreciated.

3 buttons

CodePudding user response：

I don't know how your Types.InputMode object looks like, but you can use simple JavaScript insider your rendering function.

    Object.values(Types.InputMode).map((v) => {

        const getClassName = function (value) {
            if (value === "foo") {
                return 'bar';
            }
            return 'default';
        }

        const className = getClassName(v);
        return (<Fragment key={v}>

            <ListItem button onClick={() => setView(v)}
                className={className}
                sx={{ bgcolor: v === view ? "action.selected" : undefined }}
            >
                {v}
            </ListItem>
        </Fragment>)
    })

You can outsource the rendering function for better code, but I hope this will help you.