material-ui - material-ui textField 颜色

Question

我正在使用 MUI 4.1.2 下划线的 textField 颜色在不活动和悬停时如何控制？我已经更改了调色板 - 文本 - 主要，它控制悬停时的下划线，但我想更具体地做到这一点。

我已经尝试过覆盖/MuiInput/underline/backgroundColor 等的其他解决方案，但没有奏效。

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

标签： material-ui

Answer 1

您可以通过将类传递给Input组件（它是 的子组件TextField）来覆盖下划线样式。这有点hacky，但是很好，它可以工作。

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);

这是现场示例：