CODEWITHSUNDEEP
material-ui
yodude
yodude

Reputation: 159

material-ui textField color

I'm using MUI 4.1.2 How is the textField color of the underline controlled when it's not active and when it's hovered? I have changed the palette - text - primary, which controlled the underline when it's hovered, but I would like to do this with more specificity.

I've tried other solutions with overrides/MuiInput/underline/backgroundColor etc, which have not worked.

palette: {
  overrides {
    MuiInput: {
      underline: {
        '&:hover:before': {
          backgroundColor: "#fff"
      }
    }
  }
}

Upvotes: 0

Views: 337

Answers (1)

m51
m51

Reputation: 2010

You can overwrite underline styles by passing classes to Input component (which is a child of TextField). It is a bit hacky, but well, it works.

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  underline: {
    // normal style
    "&::before": {
      borderBottom: "4px solid green"
    },
    // hover style
    "&:hover:not(.Mui-disabled):before": {
      borderBottom: "4px solid blue"
    },
    // focus style
    "&::after": {
      borderBottom: "4px solid red"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <TextField InputProps={{ className: classes.underline }} label="example" />
  );
}

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

Here is live example:

Edit upbeat-smoke-nqxws

Upvotes: 2

Related Questions