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

Question

该组件允许您设置该字段是否必填，但我想更改 * 必填字段 的 * 符号。

有什么办法可以做到吗？

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>
  );
}

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