CODEWITHSUNDEEP
material-ui
Lloyd Banks
Lloyd Banks

Reputation: 36669

Material UI - How Do I Pass In Styles Through the Select Component To Change The Popover Menu Look?

I am currently using the following to generate a select dropdown on my page:

<Select>
    {options.map((option) => (
        <MenuItem
            className={classes.selectOption}
            key={option}
            value={option}
        >
            <ListItemText primary={option} />
        </MenuItem>
    ))}
</Select>

When I click on the dropdown on the page, an element with MuiPaper-root class appears on the page. This shows me the list of options in menu item format. I would like to style the MuiPaper-root element.

Is there a way to do this by passing in an attribute to the <Select> component?

Upvotes: 0

Views: 1349

Answers (1)

Văn Vi
Văn Vi

Reputation: 51

Yes, you can change the paper by MenuProps

https://material-ui.com/api/select/#props

const useStyles = makeStyles((theme) => ({
  paper: {
    "& ul": {
      backgroundColor: "red",
    },
  }
}));


export default function CustomizedSelects() {
  const classes = useStyles();
  return (
    <Select MenuProps={{ classes: { paper: classes.paper} }}>
        {options.map((option) => (
            <MenuItem
                className={classes.selectOption}
                key={option}
                value={option}
            >
                <ListItemText primary={option} />
            </MenuItem>
        ))}
    </Select>);
}

Upvotes: 1

Related Questions