Материал-пользовательский интерфейс обязательный текст в TextField

Question

Компонент позволяет вам установить, является ли поле обязательным или нет, но я хочу изменить символ * на * mandatory field.

Есть ли способ сделать это?

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

Также, здесь это рабочий пример.