0

I have tried several strategies to change the color of the select component of material UI, but unfortunately none of them work. I define the useStyles function, where I define a select class with the border value:

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
    width: '100%',
    margin: 0,
    marginBottom: 15,
    borderColor: 'orange'
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
  select: {
    '&:before': {
      borderColor: 'red',
  }
 },
}))

And here is the select component:

const MaterialSelect = ({
  labelText, 
  menuItems, 
  setFormValue, 
  initValue,
  providerKey
}) => {
  const classes = useStyles();

And the select:

 <Select
    labelId="demo-simple-select-outlined-label"
    id="demo-simple-select-outlined"
    value={value}
    onChange={handleChange}
    labelWidth={labelWidth}
    className={classes.select}
    input={<Input classes={{
      underline: classes.underline
    }}
    name="age" id="age-helper" />}
  >
    {menuItems.map(({value, text}) => (
      <MenuItem value={value}>{text}</MenuItem>
    ))}
  </Select>
AlbertMunichMar
  • 1,680
  • 5
  • 25
  • 49
  • Does this answer your question? [How to change Material UI input underline colour?](https://stackoverflow.com/questions/50620393/how-to-change-material-ui-input-underline-colour) – KiwixLV Feb 19 '20 at 22:10
  • Not really, I lost all my styles. Now I have to style manually the Input? – AlbertMunichMar Feb 19 '20 at 22:23
  • What I don't understand is, with same strategy I could style the TextField component without a problem, and for the select, there is hundreds of posts, and no-one has a proper solution – AlbertMunichMar Feb 19 '20 at 22:25
  • Please read answer from post mentioned above. You have multiple options: 1) override global styles https://material-ui.com/customization/components/#5-global-theme-variation (in this case .MuiInput-underline:before) 2) override Select Input component (as described in my first comment) 3) add some wrapper around Select component and then override .MuiInput-underline:before – KiwixLV Feb 19 '20 at 22:40
  • @AlbertMunichMar Let me know if you don’t feel that the answer I linked this to solves your problem. – Ryan Cogswell Feb 20 '20 at 14:16
  • I spent already 4-5 hours, and never got to a decent solution. I don't get how to customize it. If I use the input, then I lose the gay-rounded-border that I have, and still don't have what I need. Even in the answers that people gave, with the sandboxes, it feels very hacky everything – AlbertMunichMar Feb 28 '20 at 21:52
  • Thanks for closing my doubt without a proper answer – AlbertMunichMar Feb 28 '20 at 22:48

0 Answers0