How do I override hover notchedOutline for OutlinedInput

Question

i upgraded from material ui version 3 to 4 and would like to override: .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline

since I think this update introduces the hover state which is changing my current UI.

I used createMuiTheme()

and have tried the following but none of those worked:

MuiOutlinedInput: {
    root: {
        '&:hover': {
            '&$notchedOutline': {
                borderColor: '#f00',
            }
        },
    },
}


MuiOutlinedInput: {
    root: {
        '&$hover $notchedOutline': {
            borderColor: '#f00',
        },
    },
}

what am I doing wrong, hope someone can help

Answer 1

You were quite close. The correct syntax is a combination of aspects from your two attempts.

The "hover" state is controlled via the ":hover" pseudo-class (it is not a rule name as referenced in your second example with $hover), so your first example correctly uses &:hover to match the hover state of the input; however the $notchedOutline class is applied to a descendant of the root element (not the root element itself) so you need the space between the root reference and the $notchedOutline reference as in your second example.

Here is a working example:

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answers:

• Change outline for OutlinedInput with React material-ui
• Global outlined override
• Can't change border color of Material-UI OutlinedInput