Change border color on on-focus state in Select Component from Material-UI (React[duplicate])

This question already has answers here

How to change material UI select border and label (3 answers)Closed last year.

I am trying to change the styling of the Select Component on focus, from the Material-UI library. To clarify, on focus, not the normal border of the input, but once you have clicked an element of the dropdown (the on focus state)

This is what I achieved:

I managed to change the background of the input on the on focus state. I can’t achieve to style the border. What I have so far:

I’ve wrapped my component with a ThemeProvider:

<ThemeProvider theme={theme1}>
  My component
</ThemeProvider>

Where theme1 is:

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          backgroundColor: '#ffddec',
          color: 'brown'
        },
        '&:before': {
          borderColor: 'orange'
        },
        '&:after': {
          borderColor: 'green',
        }
      }
    }
  }
});

My Select component looks like this:

<Select
  labelId="demo-simple-select-outlined-label"
  id="demo-simple-select-outlined"
  value={value}
  onChange={handleChange}
  labelWidth={labelWidth}
>

When I click the dropdown, the only class that changes on the Select div is Mui-focused. I tried to style this class but didn’t work.

BackgroundColor on on focus is working, but not the borderColor property. Any ideas why?

I found the behaviour that I want for the Input element, and here are the classes (see attached image) It’s the green border, it’s applied on focus

enter image description here

reactjsmaterial-uiShareImprove this questionFollowedited Feb 29 ’20 at 13:54asked Feb 29 ’20 at 0:42AlbertMunichMar1,0001313 silver badges3131 bronze badges

Add a comment

1 Answer

ActiveOldestVotes1

Replace color by borderColor in focus event.

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          backgroundColor: '#ffddec',
          borderColor: 'brown'
        },
        '&:before': {
          borderColor: 'orange'
        },
        '&:after': {
          borderColor: 'green',
        }
      }
    }
  }
});

This Post Has One Comment

  1. Malki Nama

    The Select div is Mui-focused. I tried to style this class but didn’t work.
    Background Color on on focus is working, but not the border Color property.

Leave a Reply