Can't Change Mui input label color on focus from theme.ts

Question

Here in my next.js app, I am trying to change the color of label of mui (Material UI) input field but it is not applying any styles to it.

Mui version is latest.

This is the chunk of code from my theme.ts file, which suppose to change the input field's border bottom color and change the label color. But it is only changing border bottom color.

MuiInputBase: {
  styleOverrides: {
    root: {
      fontFamily: "Manrope",
      // default state standard variant
      "&.MuiInputBase-root": {
        color: "#2A2B2F",
        // changing borderBottom color on focus working*
        "&.Mui-focused:after": {
          borderBottom: "2px solid #2E98EF",   <-- It is working
        },
      },
      // focused state of label of standard variant
      "&.Mui-focused .MuiInputLabel-root": {
        color: "#2E98EF",      <-- It is not working.
      }
    },
  },
},

I tried changing color of label using global.css file. Copy pasting the same classes and give it another color and it does work.

.muisomething.Mui-focused{
  color : red
}

I also tried modifing it using SX prop, It also does work. But I want it to be handled from the theme.ts or theme.js file. Which is not happening.

Even I can't see my styles which I used in theme.ts file from inspecting browser so !important is also Not working.

Also I tried targeting the label directly

      // focused state of label of standard variant
      "& label.Mui-focused": {
        color: "#2E98EF",
      },

Like that but the styling isn't showing up, but the border bottom is working.

I want it to be handled from theme.ts file.

Want to know your valuable thoughts on this issue. Let me know how can I handle this from theme.ts file.

Thanks for your time.

Answer 1

The solution is below (the red and blue colors are there just for fun).

Some selectors are ridiculuously long to make sure they have higher specificity than the selectors used by Material-UI.

Note: The MUI documentation says you can use MuiTextField to change the default props of the Text Field component with the theme. Your sample code was using MuiInputBase. To limit overriding the InputLabel component to the context of Input fields, the TextField component could be used. The solution below assumes use of the TextField component.

Also note that some selectors use .MuiFormLabel-colorPrimary. This assumes the color prop is set to the default value primary. If you use different color prop values you could create sibling entries to root for those values, or modify the affected selectors below to account for different color prop values, or create exceptions to these selectors using variants and/or styled. You could also simply remove .MuiFormLabel-colorPrimary from the selectors below and test to see if the selectors are still effective.

theme.ts

/* eslint-disable */
import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';

export const theme = createTheme( {
    components: {
        MuiTextField: {
            styleOverrides: {
                root: {

                    // Default state of text input field font.
                    '& .MuiInputBase-input.MuiInput-input': {
                        fontFamily: "Manrope",
                        color: '#2A2B2F',
                    },

                    // Default state of underline.
                    '& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl::before': {
                        borderBottomColor: red[900],
                    },

                    // On hover state of underline.
                    '& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl:hover::before': {
                        borderBottomColor: 'blue'
                    },

                    // On focus state of underline.
                    '& .MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-formControl.Mui-focused::after': {
                        borderBottom: '2px solid #2E98EF'
                    },

                    // Default state of label.
                    '& .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-standard.MuiFormLabel-colorPrimary.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-standard': {
                        color: red[900]
                    },

                    // On focus state of label (after text is entered into the form field).
                    '& .MuiFormLabel-root.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-shrink.MuiInputLabel-standard.MuiFormLabel-colorPrimary.MuiFormLabel-filled.MuiInputLabel-root.MuiInputLabel-formControl.MuiInputLabel-animated.MuiInputLabel-shrink.MuiInputLabel-standard': {
                        color: '#2E98EF'
                    }
                }
            }
        }
    }
} );