How do I override styles using dollar sign ($) in MUI 5?

user_7474169 0
Viewed 1313

The code below is from MUI 5, with a MUI 4 solution for change input field when hovering. But it obviously doesn't work, wonder how to achieve this in MUI 5, can't seem to change the color from the TextField upon hovering. This is done using createTheme in MUI 5

components: {
  MuiInputLabel: {
    styleOverrides: {
      root: {
        color: arcBlue,
        fontSize: '1rem',
      },
    },
  },
  MuiInput: {
    styleOverrides: {
      underline: {
        '&:before': {
          borderBottom: `2px solid ${arcBlue}`,
        },
        // Code from material ui 4
        '&:hover:not($disabled):not($focused):not($error):before': {
          borderBottom: `2px solid ${arcGrey}`,
        },
      },
    },
  },
},
jss material-ui reactjs
1 Answers

The $ syntax is a feature from JSS, in MUI v5, they switch to emotion so it doesn't work anymore, you have 2 options now:

Use plain string

From this section, you can see a list of class names that describe different MUI component states:

State Global class name
active .Mui-active
checked .Mui-checked
completed .Mui-completed
disabled .Mui-disabled
error .Mui-error
expanded .Mui-expanded
focus visible .Mui-focusVisible
focused .Mui-focused
required .Mui-required
selected .Mui-selected 
'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
  borderBottom: `5px solid purple`
}

Use constant

Most MUI components have their own class constants if you don't want to hardcode the class name:

import { [component]Classes } from "@mui/material/[Component]";
import { inputClasses } from "@mui/material/Input";

[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
  borderBottom: `5px solid purple`
}

Codesandbox Demo

Reference

user_94494260
Related