IT技术 - 如何覆盖 OutlinedInput 的悬停 notchedOutline - 吾爱随笔录

如何覆盖 OutlinedInput 的悬停 notchedOutline

IT技术 reactjs material-ui

2021-05-11 16:46:52

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

因为我认为这个更新引入了改变我当前用户界面的悬停状态。

我使用了 createMuiTheme()

并尝试了以下但没有一个工作：

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


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

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

1个回答

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

“悬停”状态是通过“: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);