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 }}
className="button-class"
>
{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 looking to assign specific class names to each of the buttons within a list inside a drawer, allowing me to target them individually. I'm seeking guidance on where and how to add these class names for the three buttons in question. Any assistance would be greatly appreciated.