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

Question

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.

"it's not exactly a Select component since I'm using a TextField with 'select' property" - `TextField` with select is basically a `Select` [behind the scene](https://github.com/mui-org/material-ui/blob/e0cdcd130db60d252c4382570844ea7278649a08/packages/mui-material/src/TextField/TextField.js#L204-L217). — NearHuscarl, Oct 16 '21 at 19:40

NearHuscarl · Accepted Answer · 2021-10-16T19:43:42.933

4

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"
        }
      }
    }
  }}

edited Oct 16 '21 at 19:43

answered Oct 16 '21 at 19:11

NearHuscarl

66,950
18
261
230

Thanks a lot for your answer and the sample on CodeSandbox. Since I was pretty sure that your code must be right and your code in my case still didn't work I searched for another reason. Long story short: It was the alpha version of MUI. After reinstalling current version of MUI it now works. – marco Oct 16 '21 at 20:30
I played around with both and noticed, that first one, using `classes.paper` works on first render and after reloading the page it falls back to initial MUI style. Second one, using sx property works even after reload. Thanks for mentioning deprecation of `makeStyles`. Would you recommend using `classes` instead of `makeStyles` as well? – marco Oct 16 '21 at 23:26
1

@marco I'm not sure what you mean by choosing between `classes` and `makeStyles`, `makeStyles`/`withStyles` are deprecated, the output of those APIs are the classnames where you can pass into the `className` or `classes` props. The new API `styled`/`sx` doesn't expose the className anymore. – NearHuscarl Oct 16 '21 at 23:29
@marco It probably doesn't work as expected because both v4 and v5 add the same MUI class selectors but use [different styling libraries](https://stackoverflow.com/a/69508854/9449426) under the hood, so you should migrate the styles to v5 completely to prevent bugs like [this](https://stackoverflow.com/q/69309151/9449426). – NearHuscarl Oct 16 '21 at 23:31

score 0 · Answer 2 · answered Oct 16 '21 at 19:22

0

Use classes or emotion styled instead of makeStyles

Menu Docs MenuItem Docs

Classes:

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

answered Oct 16 '21 at 19:22

Ali Yaghoubi

1,258
8
15

Also use `selected` in MenuItem – Ali Yaghoubi Oct 16 '21 at 19:26

score 0 · Answer 3 · answered Sep 27 '22 at 14:31

You can use global style to achive this thing

For Mui V4.

const darkTheme = createTheme({
  overrides: {
    MuiMenu: {
      paper: {
        background: "none !important",
        backdropFilter: "blur(10px) !important",
      },
    },
  },
  palette: {
    type: "dark",
  },
});

For Mui V5.

const darkTheme = createTheme({
  components: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          background: "none !important",
          backdropFilter: "blur(10px) !important",
        },
      },
    },
  },
  palette: {
    type: "dark",
  },
});

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

3 Answers3