Material-ui: Hardcoded Input underline color

[Co0sh]

As seen here line, the color of the underline in the Input component is set to be dark on light theme and light on dark theme. It's not configurable though, so we can't change it via custom theme, only by overriding classes. You can however change all other colors using theme alone, which seems like an inconsistency.

I'd like to submit a PR changing this to some value from theme, but I'm not sure which one - default text colors don't match this particular underline.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The color for the underline should be taken from theme.

Current Behavior 😯

The color is hardcoded.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/8xv2k57ym8

1. Use theme to change all colors of the Input.
2. Notice how underline is still black when not focused or hovered.

Context 🔦

I'd like to style it in some other way than overriding quite complex JSS classes every time.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.6.1 |
| React | N/A |
| Browser | N/A |
| TypeScript | N/A |
| etc. | N/A |

[oliviertassinari]

@Co0sh What about?

const theme = createMuiTheme({
  overrides: {
    MuiInput: {
      underline: {
        "&:before": {
          borderBottom: `1px solid ${color}`
        }
      }
    }
  }
});

https://codesandbox.io/s/q902qwo7q4

[Co0sh]

Yes, it definitely works, but I guess my point is that this doesn't feel like a correct solution. Is there any reason to have the underline the way it is right now and not as I described?

[oliviertassinari]

@Co0sh What would be the correct solution?

[Co0sh]

The color for the underline should be taken from theme.

Now that I think of it, it might not be a good idea after all. Changing the underline color could be a breaking change for people with custom themes, unless it's put in its own variable and not computed out of some other colors.

Thanks for the help though, I'll use the override for now 👌

[oliviertassinari]

@Co0sh This is a problem we have been wrapping our head around for quite some time. Some alternatives:

1. Add a variable in the theme. People want to override all kind of values. We might end up with a lot of custom variables in the theme. It's what Bootstrap does, it's fine for them as they use statistically generated CSS, we don't. Each variable end up in people bundle. I have some concern with the bundle size implications at scale (many variables).
2. Use CSS variables It's something we are looking into, we might have to drop some custom color transformations, add more theme variables in exchange. It can be beneficial. In our specific case, we could not provide the css variable but let people do. so you would able to change the color quite easily. #12827

[optimista]

Tinkering with the Input underline as well at the moment.

I'm getting rid of the scale transformation and I would like to have just a simple color transition on &:hover and &$focused. It feels a bit tedious to understand whether and how I should modify &:before or &:after not to mess with different state colors (like Mui-error). Pseudoclasses are not very friendly in here when it comes to customization. I was almost thinking of creating a separate component for underline (kind of analogy to Fade / Grow), but again, not a fan of creating additional DOM elements / components. CSS variables seems like the most reasonable option.

[oliviertassinari]

@optimista Did these demos help? https://material-ui.com/components/text-fields/#customized-inputs