1

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:

https://codesandbox.io/s/ancient-cookies-4femm

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

AlbertMunichMar
  • 1,680
  • 5
  • 25
  • 49

1 Answers1

1

Replace color by borderColor in focus event.

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          backgroundColor: '#ffddec',
          borderColor: 'brown'
        },
        '&:before': {
          borderColor: 'orange'
        },
        '&:after': {
          borderColor: 'green',
        }
      }
    }
  }
});
Carlos Osvaldo Chao Cortes
  • 67
  • 6