CODEWITHSUNDEEP
material-ui
Bishonen_PL
Bishonen_PL

Reputation: 1571

Change color of selected item in Select [Material UI]

Trying to change the default dark-blue color of a material-ui select is giving me some issues.

E.g. on this sandbox1, how does one override the blue color on the "Native Select"? I tried overriding it with the below, but to no avail. It changes the color when hovered over, but when I select it, it goes back to being blue.

  selected: {
    '& option:hover': {
      background: 'red',
    },
    '& option:active': {
      background: 'red',
    },
    '& option:focus': {
      background: 'red',
    }
  }

1 https://codesandbox.io/s/cwvg4?file=/demo.js

EDIT:

enter image description here

Upvotes: 1

Views: 1334

Answers (1)

Manu Sharma
Manu Sharma

Reputation: 774

If your requirement here is to change the color to 'red' for depicting error, then you can pass 'error' prop in the 'select' component as true. If that's not the case, I have made a workaround for your use case.

 const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  icon: {
    fill: "red"  //coloring the dropdown arrow icon
  },
  select: {
    // color: "red", //can be used to give color to options in the dropdown 
    "& option": {
      background: theme.palette.background.paper
    },
    "&:before": {
      borderColor: "red"
    },
    "&:after": {
      borderColor: "red"
    }
  }
});

Also, for the color of your label 'Age' ( in your CodeSandBox )

<InputLabel htmlFor="age-native-simple" style={{ color: "red" }}>

Didn't completely get your requirement, but this should help you with the coloring part.Also, this might not be the prettiest solution, but will get the work done!

Check out the demo for the same: https://codesandbox.io/s/green-sunset-oyhm8?file=/src/demo.js:977-1042

Upvotes: 0

Related Questions