【问题标题】:React Material UI TextField hover mouse iconReact Material UI TextField 鼠标悬停图标
【发布时间】:2021-10-24 09:57:38
【问题描述】:

当 TextField 具有 variant="outlined" 时,我想更改 Material UI 组件的 TextField 的默认鼠标光标行为。在这种情况下,光标是文本,我想将它作为指针。我试图像下面那样覆盖它,但它没有用。我还把 MuiInputBase 改成了 TextField 还是不行

  const myTheme = createTheme({
    overrides: {
        MuiInputBase: {
        root: {
          '&:hover:': {
            cursor: "pointer"
          },
        }
      }
    }
  });

然后在我的提供者中:

<ThemeProvider theme={myTheme}>
   <TextField variant="outlined"/>
</ThemeProvider>

【问题讨论】:

    标签: reactjs material-ui textfield mousehover mouse-cursor


    【解决方案1】:

    只需将root 更改为input

    MuiInputBase: {
      input: {
        "&:hover": {
          cursor: "pointer",
        },
      },
    },
    

    【讨论】:

    • 谢谢越南。你能告诉我你是怎么知道应该选择哪个选择器的吗?我使用了 google chrome 开发工具,当我将其悬停时,我看到了 MuiInputBase-root 并触发了更多类。谢谢
    • 你可以搜索属性cursor并在input看到它
    • 当我搜索时,我主要看到 MuiInputBase-root 上的光标
    猜你喜欢
    • 2021-08-28
    • 1970-01-01
    • 2011-08-04
    • 2018-09-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-03-23
    相关资源
    最近更新 更多