css 当鼠标悬停在TextField上时，Material-ui显示指针光标

ruarlubt 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(183)

Material-ui/ReactJS新手问题。我试图在悬停在Material-ui TextField上时显示指针光标，但很难做到。它使用了“cursor：text'的默认值。我已经能够成功地改变文本字段的背景颜色悬停，但添加“光标：pointer！important”没有什么用。我试过使用className，class，style（inline），但是我确信我做的不对。Material-ui有一个演示演示说明了如何在悬停时更改文本字段的样式，重点是[https：//codesandbox.io/s/p7uwn？file = /demo.js][1]，我也试过在悬停时将光标更改为指针，但是仍然没有成功。如果有任何帮助，我将非常感激。

import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: green;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: yellow;
      cursor: pointer !important;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}

css

来源：https://stackoverflow.com/questions/67943441/material-ui-show-pointer-cursor-when-hovering-over-textfield

3条答案

按热度按时间

8e2ybdfx1#

或者直接把cursor：pointer放到它的css中，或者内嵌为<Component style={{cursor: 'pointer'}}>或<Component sx={{cursor: 'pointer'}}>，或者放到它的样式化组件css中。这会自动改变你的鼠标onHover，而这里最上面的答案是非常高的。只要把cursor: 'pointer'添加到组件的css中。

赞(0）回复(0）举报 2022-11-19

qyyhg6bp2#

只需快速检查浏览器，就可以得到我们需要定位的CSS组件。
. Mui大纲输入-输入
只是给它一个
光标：指针;
物业会解决你的问题。
下面是代码：

import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';

const StyledTextField = styled(TextField)`
  label.Mui-focused {
    color: green;
  }
  .MuiOutlinedInput-input {
    cursor: pointer;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: blue;
      cursor: pointer;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}

赞(0）回复(0）举报 2022-11-19

nle07wnf3#

使用中

<TextField sx={{ cursor: 'pointer' }} />

对我不起作用，相反，我需要将其指定为

<TextField sx={{ input: { cursor: 'pointer' } }}

这确实影响了所期望的改变。

赞(0）回复(0）举报 2022-11-19

我来回答

css 当鼠标悬停在TextField上时，Material-ui显示指针光标

3条答案

相关问题

热门标签

最新问答