I have integrated the Material UI Select component into my React project.
I am attempting to customize the CSS classes .MuiPaper-root
and/or .MuiMenu-list
.
This is how my Select component looks:
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
css={styles.select}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
css={styles.selectItem}
>
{city.label}
</MenuItem>
);
})}
</Select>
However, the following code snippet doesn't seem to be effective:
export default ({ theme }: StylesProps) => ({
select: css`
.MuiPaper-root {
background-color: red;
}
`,
});