How to change the background color of MUI Menu Popover of TextField with select property?

user_10224020 0
Viewed 1963

I want to achieve that the popover respectively the menu of a TextField with 'select' property changes the background color. I followed the instructions of MUI customization docs. I had success in changing i.e. color of text and label of a TextField with following code.

const useStyles = makeStyles({
  root: {
    color: "azure",
    '& .MuiInputLabel-root': { color: "#adadad",}
  }
})

const TextFieldBar = (props) => {
  const classes = useStyles();
  return (
    <Stack className={classes.root} >
      <TextField
        select
      >
        <MenuItem>
          Option 1
        </MenuItem>
        <MenuItem>
          Option 2
        </MenuItem>
        <MenuItem>
          Option 3
        </MenuItem>
      </TextField>
    </Stack>
  )
}

But I get stuck when trying to change anything of the popover when you click on a Select component. I've to mention, that it's not exactly a Select component since I'm using a TextField with 'select' property. So my question is, which class I should use to change the background. I inspected the html element and tried all applied classes like in the following snippet, but with no success.

const useStyles = makeStyles({
  root: {
    '& .MuiPaper-root': {background: 'black'}; //doesn't work
    '& .MuiPaper-rounded': {background: 'black'}; //doesn't work
    '& .MuiPaper-elevation': {background: 'black'}; //doesn't work
    .
    .
    .
  }
})

I think that I didn't understand the system behind customizing MUI components, yet. It's just a guess but maybe I can't reach the html element since the popover/menu is not a child of the Stack or TextField component on which I apply my custom styles.

I'm using

  • React 17.0.2
  • mui-core 5.0.0-alpha.47
  • @mui/material 5.0.3
  • @mui/styles 5.0.1

Thanks in advance.

material-ui reactjs javascript
2 Answers

Paper is not inside the Select in the DOM tree, by default it uses portal to display the menu list, because of that, you cannot target the descending class name unless you use MenuProps.disablePortal. To overcome that, MUI provides the MenuProps so you can pass the props to the Paper including the className:

<TextField
  select
  label="Select"
  SelectProps={{
    MenuProps: {
      PaperProps: {
        className: classes.paper
      }
    }
  }}

Since you're using v5, you can also use the sx prop. Note that, the MUI team does not recommend using makeStyles because it's deprecated and may be removed in the future versions:

<TextField
  select
  label="Select"
  SelectProps={{
    MenuProps: {
      PaperProps: {
        sx: {
          backgroundColor: "pink",
          color: "red"
        }
      }
    }
  }}

Codesandbox Demo

user_94494260

Use classes or emotion styled instead of makeStyles

Menu Docs MenuItem Docs

Classes:

<MenuItem
    classes={{...}}
>
    ...
</MenuItem>
user_116623350
Related