I'm trying to set the hover border color of a TextField to a theme variable. However I found that the hover borderColor needs the "!important" tag to work, but I don't know how to add it to the theme variable?

So basically what I need to do is borderColor: theme.palette.primary.main!important somehow.

I made an example below, you can also check the codesandbox. Any suggestions are welcome!

  const style = {
    fieldset: {
      borderColor: theme.palette.primary.main
    },
    "&:hover fieldset": {
      //borderColor: "green!important" // works
      borderColor: theme.palette.primary.main // doesnt work
    }
  };

  return <TextField sx={style} />;

https://codesandbox.io/s/bold-robinson-17spqs

CodePudding user response：

Two edits:

1. You are setting the primary color to the border color when hovering which is the same color it has when it is in not-hovering mode! (both primary.main)
2. you can set "!important" to your code.

Try following, it works:

import { React } from "react";
import { TextField } from "@mui/material";

export const theme = {
  palette: {
    primary: {
      main: "#D20000",
      secondary: "green"
    }
  }
};

export default function App() {
  const style = {
    fieldset: {
      borderColor: theme.palette.primary.main
    },
    "&:hover fieldset": {
      //borderColor: "green!important" // works
      borderColor: theme.palette.primary.secondary   "!important" // doesnt work
    }
  };

  return <TextField sx={style} />;
}