小编syb*_*oda的帖子

Material-ui/ReactJS 新手问题。我试图将鼠标悬停在 Material-ui TextField 上时显示指针光标，但很难做到这一点。它默认使用“光标：文本”。我已经能够成功地更改悬停时的文本字段背景颜色，但添加“光标：指针！重要”没有任何好处。我尝试过使用 className、class、style （内联），但我确信我没有做正确的事情。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>
  );
}


 

有谁知道如何通过 MUI 5 SX prop 使用多个 CSS 类？我创建了一个基类，我想将其与 Box 组件一起使用，但使用第二个类专门用于 Box 内部的文本。应用基类，例如sx={styles.baseBoxStyle}可以工作但sx={styles.baseBoxStyle styles.customBoxFontStyle}返回错误。下面提供了完整的代码片段和沙箱。非常感谢任何帮助！

沙盒：https://codesandbox.io/s/mui-5-styling-uqt9m?file =/pages/index.js

import * as React from "react";
import Box from "@mui/material/Box";

const styles = {
  baseBoxStyle: {
    backgroundColor: "red",
    borderRadius: "20px 20px 20px 20px",
    border: "1px solid black",
    maxWidth: "150px",
    margin: "20px",
    padding: "10px"
  },
  customBoxFontStyle: {
    color: "yellow",
    fontWeight: "bold"
  }
};

export default function Index() {
  return <Box sx={styles.baseBoxStyle styles.customBoxFontStyle}>This is a test</Box>;
}

我正在努力掌握 MUI 5 中的样式更改。我有一堆样式在 Material UI 4 中运行良好，但是当尝试在 MUI 5 中应用相同的样式时，我的 Web 检查器将其显示为 [object] 而不是与 sx 一起使用时的 CSS 类名。

例如，我在下面创建了测试用例，唯一实际有效的样式是带有 style 属性的“myBorder”。sx 不工作。任何人都可以阐明我做错了什么吗，这里的新手？

import * as React from "react";

const styles = {
  myBackground: {
    backgroundColor: "red"
  },
  myBorder: {
    border: "2px solid green"
  },
  myFont: {
    color: "blue"
  }
};

export default function Index() {
  return (
    <div
      sx={styles.myBackground}
      style={styles.myBorder}
      classes={styles.myFont}
      className={styles.myFont}
      maxWidth="sm"
    >
      This is a test
    </div>
  );
}

请参阅 codepen https://codesandbox.io/s/mui-5-styling-uqt9m?file=/pages/index.js

ReactJS/Material-UI 新手问题。我正在利用 Material-UI 自动完成功能，并尝试创建一个函数，我可以通过编程方式调用该函数来关闭 Material-UI 自动完成弹出器结果列表，但在如何执行此操作方面遇到了困难。到目前为止，我已经向自动完成字段添加了一个引用，并尝试触发模糊，因为弹出器已经自动关闭 onBlur，但遗憾的是我收到一条错误消息，指出 onBlur 不是函数。非常感谢任何帮助。

const closePopper = () => {    
    myAutocompleteFieldRef.current.onBlur();
  };