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 ponent. I've to mention, that it's not exactly a Select ponent 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 ponents, 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 ponent 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.

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 ponent. I've to mention, that it's not exactly a Select ponent 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 ponents, 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 ponent 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.

• javascript
• reactjs
• material-ui

• "it's not exactly a Select ponent since I'm using a TextField with 'select' property" - TextField with select is basically a Select behind the scene. – NearHuscarl Commented Oct 16, 2021 at 19:40

3 Answers 3

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

Use classes or emotion styled instead of makeStyles

Menu Docs MenuItem Docs

Classes:

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

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({
  ponents: {
    MuiMenu: {
      styleOverrides: {
        paper: {
          background: "none !important",
          backdropFilter: "blur(10px) !important",
        },
      },
    },
  },
  palette: {
    type: "dark",
  },
});