I want to change the hover color to red. Wrote a topic for this element does not respond, how to fix it? it turns out it goes dark by default, I want to change it to another color, for example, red, but it doesn't work

  MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "& $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&:hover $notchedOutline": {
            borderColor: "#ff0000",
          },
          "&$focused $notchedOutline": {
            borderWidth: 0,
          },
        },
      },
    },


import OutlinedInput from "@mui/material/OutlinedInput";

const Search = () => {
  return (
    <>
      <OutlinedInput />
    </>
  );
};

export default Search;

CodePudding user response：

You can do it like this:

const theme = createTheme({
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#ff0000"
          },
          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#ff0000"
          }
        }
      }
    }
  }
});

Working example

$notchedOutline doesn't work for me.