How to change the color of asterisk in material UI Textfield label-CodePudding

How can I have the color of the asterisk changed to red.

I do not want label for the Textfield separately. If there is a way to change the asterisk color to red, do let me know.

<TextField id="outlined-basic" label="Name" variant="outlined" required/>

CodePudding user response：

you can create a styled component for that like so:

import * as React from "react";
import TextField from "@mui/material/TextField";
import { styled } from "@mui/material";

const StyledTextField = styled(TextField)(() => ({
  "& .MuiFormLabel-asterisk": {
    color: "red"
  }
}));

export default function Tags() {
  return (
    <StyledTextField
      id="outlined-basic"
      label="Outlined"
      required
      variant="outlined"
    />
  );
}

or you can override your theme configuration by adding the following to your theme file:

overrides: {
    MuiFormLabel: {
      asterisk: {
        color: "red",
      }
  }
}

CodePudding user response：

You have to access the actual CSS by looking into DOM (inspect => elements). And look where the asterisk is. Get its class and override CSS with you own CSS.