reactjs - 如何覆盖 OutlinedInput 的悬停 notchedOutline

Question

我从 Material 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 class 应用于根元素的后代( 不是 根元素本身)，因此您需要根引用和 $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);

相关回答:

Change outline for OutlinedInput with React material-ui

Global outlined override

Can't change border color of Material-UI OutlinedInput