如何为OutlinedInput覆盖悬停notchedOutline

Question

我从材料ui版本3升级到了4，并且想覆盖：.MuiOutlinedInput-root：hover .MuiOutlinedInput-
notchedOutline

因为我认为此更新引入了悬停状态，从而改变了我当前的用户界面。

我用了createMuiTheme（）

并尝试了以下方法，但没有一个起作用：

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


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

我做错了什么，希望有人可以帮忙

Answer 1

你很亲近 正确的语法是您两次尝试中各个方面的组合。

“ hover”状态是通过“：hover”伪类控制的（它 不是
第二个示例中使用引用的规则名$hover），因此第一个示例正确地用于&:hover匹配输入的悬停状态。但是，$notchedOutline该类将应用于根元素的后代（
而不是 根元素本身），因此您需要在根引用和$notchedOutline引用之间留出空间，如第二个示例中所示。

这是一个工作示例：

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