CODEWITHSUNDEEP
reactjsmaterial-ui
Przemek Lach
Przemek Lach

Reputation: 1538

Material UI TextField Style Override Using Theme

I have a TextField: https://mui.com/components/text-fields/

 <TextField
      fullWidth
      type={'email'}
      variant={'standard'}
      label={'Email'}/>

My background is dark so I'm trying to override the default colours using my theme. I have been able to change the text color and the bottom border when in focus to white but I cannot figure out how to change the bottom border to white when out of focus.

Not in focus: enter image description here

In Focus: enter image description here

Here is what my theme looks like:

const lightTheme: ThemeOptions = createTheme({
  palette: {
      primary: {
          main: '#ffffff',
      },
  },
  typography: {
      allVariants: {
          color: 'white'
      },
  },
  components: {
      MuiInputBase: {
          styleOverrides: {
              input: {
                  color: 'white',
              }
          }
      }
  }
});

I'm also having a hard time finding documentation on which styles are available and what they do in the Material UI docs. Perhaps in addition to helping me solve this particular problem someone can point me to a good spot in the docs for references whenever I want to change the styles on any Material UI component.

Upvotes: 2

Views: 14423

Answers (1)

hotcakedev
hotcakedev

Reputation: 2514

If you inspect and check the style through the browser, then you will realize the border bottom is applied for the ::before pseudo element MuiInput-root class.

Like I said, I guess it will work if you pass the same to the pseudo element into your theme.

enter image description here

const lightTheme: ThemeOptions = createTheme({
  palette: {
      primary: {
          main: '#ffffff',
      },
  },
  typography: {
      allVariants: {
          color: 'white'
      },
  },
  components: {
      MuiInputBase: {
          styleOverrides: {
              input: {
                  color: 'white',
                  '&::before': {
                      border-bottom: 1px solid rgba(0, 0, 0, 0.42); // use your color
                  }
              }
          }
      }
  }
});

Upvotes: 3

Related Questions