Unfocused Input bottom borders do not reference the theme

[danielbchapman]

Simply put, the TextField inputs do not reference the theme for the colors and instead use a hard coded transparent white:

https://github.com/mui-org/material-ui/blob/674c523dffd0997f08154bc3c513e200823ee228/packages/material-ui/src/FilledInput/FilledInput.js#L10-L13

//----------Suggested Code
const bottomLineColor = light ? theme.palette.common.underline
const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';`

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

Expected Behavior 🤔

I create a theme using offwhite grey colors and I expected the components to respect that

Current Behavior 😯

The components use a hard coded value based on light or dark rather than a theme.

Steps to Reproduce 🕹

N/A this appears to be a design choice/oversight

Context 🔦

I'm trying to produce a low-light "dark amber" theme for uses who work in dark settings. Eliminating white/blue channels of light is highly desirable.

Your Environment 🌎

Tech	Version
Material-UI	v3.6 >
React
Browser
TypeScript
etc.

[oliviertassinari]

@danielbchapman Thank you for raising this issue! I think that we should apply this change to the FilledInput.js component: #13825. It should make the override much simpler. Do you want to work on it? :) We can simplify these lines:
https://github.com/mui-org/material-ui/blob/674c523dffd0997f08154bc3c513e200823ee228/packages/material-ui/src/FilledInput/FilledInput.js#L80-L82

Thank you for raising the concern.

[oliviertassinari]

I'm trying to produce a low-light "dark amber" theme for uses who work in dark settings. Eliminating white/blue channels of light is highly desirable.

Once the suggested changed is applied, you should be able to get that output with:

const theme = createMuiTheme({
  overrides: {
    MuiFilledInput: {
      underline: {
        '&:before': {
          borderBottom: '1px solid #FF7E00',
        },
      },
    },
  },
});

https://codesandbox.io/s/l78789zrkq

[gabrielliwerant]

The above example appears to be crashing in the sandbox:

Invariant Violation
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `OverridesCss`.

[oliviertassinari]

@gabrielliwerant Thanks, updated.

[C-Rodg]

@oliviertassinari is this still good to take? Looks like all that needs to be done is make line 80 use 'borderBottomStyle' instead of 'borderBottom', correct?

[oliviertassinari]

@C-Rodg Yes, I think so :)