Select component does not respect `disabled` styles

cdcasey commented 5 years ago

The Select components show a dotted underline when disabled. There appears to be no way to change this styling.

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The bottom border stays dotted no matter what I try.

The bottom border should change according to specified styling.

1) Create a select component 2) Specify that the component is disabled 3) Style the disabled state with classes={{ disabled: classes. }}

Steps:

Simply load the demo and you should see the bug. The Select component is disabled and the CSS is there and not being recognized.

Unrelated, I tried to delete that second Select component, but got a CORS error when doing so. I have no idea what's going on there.

I would like to style this component reliably in all states.

eps1lon commented 5 years ago

You need to increase the specificity. More about this topic under https://material-ui.com/customization/components/#pseudo-classes

cdcasey commented 5 years ago

As we're using JSS I tried this:

But nothing overrides the .MuiInput-underline.Mui-disabled::before class that defines that bottom border.