Material UI V5 Theming Customization

If your custom style is overridden by Material UI you can just add !important; after each one of your custom styles.

You can the sx on the props of the object:

<TextField id="outlined-basic" sx={{background:'red'}} label="Outlined" variant="outlined" />

follow the link to see the props of sx: https://mui.com/system/the-sx-prop/

See the docs for overriding nested component styles.

For TextField that would be:

<TextField
  variant="outlined"
  sx={{
    '& .MuiInputBase-input': {
      color: 'white',
    },
  }}
/>)

If you want just the text color to be white

You can add sx prop for the TextField.

<TextField
  variant="outlined"
  sx={{
    '& .MuiInputBase-input': {
      color: 'white',
    },
  }}
/>

If you want to customize the default MUI theme

1. Import createTheme and ThemeProvider.

   import { createTheme, ThemeProvider } from '@mui/material/styles';

2. Override theme. (You can go to https://mui.com/customization/default-theme/ and find exactly what to override.)

    const theme = createTheme({
        palette: {
          common: {
            white: '#FFFAFA'
          },
        }
      })
   

3. Wrap Your Components or the TextField with ThemeProvider.

<ThemeProvider theme={theme} >
      <TextField
        variant="outlined"
        sx={{
          '& .MuiInputBase-input': {
            color: 'white',
          },
        }}
      />
</ThemeProvider>

The color 'white' in the TextField will be the white color that you customized. You can also define a color palette for the application.

Refer mui.com/customization/theming for more details.

Here is a youtube Tutorial for this https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja