reactjs - TextField 上的 Material-UI 自定义所需文本

Question

组件允许您设置是否需要该字段，但我想*更改* mandatory field.

有什么办法可以做到吗？

标签： reactjsmaterial-ui

Answer 1

我在他们的 API 上找不到任何关于它的信息，但是您可以::after在星号的元素上使用伪<span>元素：

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      width: 200,

      "& .MuiFormLabel-asterisk.MuiInputLabel-asterisk": { // these are the classes used from material-ui library for the asterisk element
        "&::after": {
          content: '"mandatory field"' // add your text here
        }
      }
    }
  }
}));

export default function FormPropsTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} noValidate autoComplete="off">
      <div>
        <TextField
          defaultValue="My Name"
          required
          id="standard-required"
          label="Name"
        />
      </div>
    </form>
  );
}

此外，这是一个工作示例。