Reactjs 如何覆盖OutlinedInput的悬停线

我从material ui版本3升级到4，并希望覆盖： .muioOutlinedInput根目录：悬停.muioOutlinedInput槽口双线

因为我认为这个更新引入了悬停状态，它正在改变我当前的UI

我使用createMuiTheme（）

并尝试了以下方法，但均无效：

MuiOutlinedInput: {
    root: {
        '&:hover': {
            '&$notchedOutline': {
                borderColor: '#f00',
            }
        },
    },
}


MuiOutlinedInput: {
    root: {
        '&$hover $notchedOutline': {
            borderColor: '#f00',
        },
    },
}

---

我做错了什么，希望有人能帮我

你很接近。正确的语法是您两次尝试的方面的组合

“hover”状态是通过“：hover”伪类控制的（它不是第二个示例中使用

$hover

引用的规则名称），因此第一个示例正确地使用

&:hover

来匹配输入的悬停状态；但是，

$notchDoutline

类应用于根元素的后代（而不是根元素本身），因此您需要根引用和

$notchDoutline

引用之间的空间，如第二个示例所示

以下是一个工作示例：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField variant="outlined" defaultValue="My Text" />
    </MuiThemeProvider>
  );
}

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

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{createMuiTheme，MuiThemeProvider}”；
const theme=createMuiTheme({
覆盖：{
MuiOutlinedInput：{
根目录：{
“&$Doutline”：{
边框颜色：“绿色”
},
“&：悬停$notchDoutline”：{
边框颜色：“红色”
},
“&$focused$notchDoutline”：{
边框颜色：“紫色”
}
}
}
}
});
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

有关答案:





嗨，Ryan，好近啊，非常感谢你的指点。希望这也能帮助其他人