0
363
ViewsHow to change the background color of MUI Menu Popover of TextField with select property?
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.
2 answers
Answer question0
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"
}
}
}
}}
0
Use classes or emotion styled instead of makeStyles
Classes:
<MenuItem
classes={{...}}
>
...
</MenuItem>