CODEWITHSUNDEEP
cssreactjsmaterial-ui
SJ19
SJ19

Reputation: 2123

ReactJS Material UI - Issue with setting the hover border color of TextField

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

Upvotes: 2

Views: 1861

Answers (1)

Amirhossein Sefati
Amirhossein Sefati

Reputation: 709

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} />;
}

Upvotes: 2

Related Questions