How to Style Material UI Select Popup?

Question

I have the following react select component working correctly except I'd like different background colors and fonts for the select options.

Select Code

<TextField fullWidth select size="small" name="trigger" value={thisTrigger} onChange={(selectedOption) => { doSetTrigger(selectedOption); }} InputProps={{disableUnderline: true}} > {triggers.map((trigger, index) => ( <MenuItem key={index} value={index} > {trigger.ENDPOINT} </MenuItem> ))} </TextField>

and I've tried every which way I can think of to style it - this was my latest attempt

root: { 'background': 'linear-gradient(#F0F0FA, #F0F0FA)', 'height': '100vh', 'width': '100%', 'position': 'relative', '& .MuiList-padding': { 'borderRadius': '10px', 'background': 'white', 'color': '#001C32', 'fontWeight': 400, 'fontFamily': '"Manrope", "Roboto", "Arial", "sans-serif"', 'lineHeight': '1.5', 'fontSize': '1em', }, },

Which surprised me when it didn't work, because I can add a background color to .MuiList-padding in the browser dev tools, and it works!

I must be missing something; any suggestions are welcome!

If you read material-ui.com/components/selects, it specifically mentions using a TextField — glowkeeper
– glowkeeper, Commented Jul 20, 2021 at 11:32

Nisharg Shah · Accepted Answer · 2021-07-17 12:01:16Z

2

I think you want this

MenuProps={{ classes: { list: classes.menu } }}

Codesandbox: https://codesandbox.io/s/peaceful-kare-c815b?file=/src/App.js

answered Jul 17, 2021 at 12:01

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

glowkeeper Over a year ago

Didn't work for me - but it got me oh so close and gave me ideas. Thanks!

glowkeeper · Accepted Answer · 2021-07-20 12:31:59Z

The MenuProps suggestion from @Nisharg didn't quite work for me, unfortunately. It came oh so close, though. And it gave me enough to find a solution. Below is what worked for me:

 <TextField fullWidth select size="small" name="trigger" value={thisTrigger} onChange={(selectedOption) => { doSetTrigger(selectedOption); }} InputProps={{disableUnderline: true}} SelectProps={{ MenuProps: { classes: {paper: classes.cmdSelect}, }, }} > {triggers.map((trigger, index) => ( <MenuItem key={index} value={index} > {trigger.ENDPOINT} </MenuItem> ))} </TextField>

Where classes.cmdSelect looks like this:

 cmdSelect: { '& ul': { backgroundColor: '#FFFFFF', }, },

Boom!

Collectives™ on Stack Overflow

How to Style Material UI Select Popup?

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related