Material ui 材质ui文本字段颜色

我正在使用MUI 4.1.2 当下划线处于非活动状态和悬停状态时，如何控制下划线的文本字段颜色？ 我已经更改了调色板-文本-主选项板，它在鼠标悬停时控制下划线，但我想做得更具体一些

我尝试过其他覆盖/MuiInput/underline/backgroundColor等解决方案，但都不起作用

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

---

通过将类传递给

Input

组件（它是

TextField

的子组件），可以覆盖下划线样式。这有点老套，但它很管用

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/TextField”导入TextField；
从“@material ui/styles”导入{makeStyles}”；
const useStyles=makeStyles({
下划线：{
//正常风格
“&:：before”：{
边框底部：“4px纯绿”
},
//悬停式
&：悬停：未（.Mui已禁用）：之前：{
borderBottom：“4px纯蓝色”
},
//焦点风格
“&：：之后”：{
边框底部：“4px纯红”
}
}
});
函数App（）{
const classes=useStyles（）；
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
您可以通过将类传递给
Input
组件（它是
TextField
的子组件）来覆盖下划线样式。这有点老套，但很好，它可以工作

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/TextField”导入TextField；
从“@material ui/styles”导入{makeStyles}”；
const useStyles=makeStyles({
下划线：{
//正常风格
“&:：before”：{
边框底部：“4px纯绿”
},
//悬停式
&：悬停：未（.Mui已禁用）：之前：{
borderBottom：“4px纯蓝色”
},
//焦点风格
“&：：之后”：{
边框底部：“4px纯红”
}
}
});
函数App（）{
const classes=useStyles（）；
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
如何在基于类的组件中执行此操作？我使用“样式化组件API”进行设置：``const MyTextField=styled（TextField）（{underline:{“&：：before:{borderBottom:”4px solid green“}}）}；``这不起作用…@yodude您可以自定义
TextField
组件（使用样式）我使用“样式化组件API”设置它：``const MyTextField=styled（TextField）（{underline:{“&：：before:{borderBottom:“4px solid green”}}}；``这不起作用…@yodude您可以自定义
TextField
组件（使用样式）在任何地方都可以使用