reactjs 如何更改材质UI文本字段标签中星号的颜色

wecizke3  于 2022-12-22  发布在  React
关注(0)|答案(2)|浏览(313)

我怎样才能把星号的颜色改成红色。
我不想标签的文本字段单独。如果有一种方法来改变星号颜色为红色,请让我知道。

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

hjzp0vay1#

你可以为它创建一个样式化的组件,如下所示:

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

或者您可以通过添加以下内容到您的主题文件来覆盖您的主题配置:

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

ryevplcw2#

你必须通过查看DOM(inspect =〉elements)来访问实际的CSS,并查看星号在哪里,获取它的类并用你自己的CSS覆盖CSS。

相关问题