如何将自定义 CSS 颜色添加到 Material UI 文本字段组件的输入颜色答案

【问题标题】：How to add Custom CSS colors to Input color of Material UI Text Field component如何将自定义 CSS 颜色添加到 Material UI 文本字段组件的输入颜色
【发布时间】：2021-12-20 06:20:17
【问题描述】：

import { TextField } from "@mui/material";
import { FunctionComponent } from "react";

interface IProps {
  type: string;
  label: string;
  color:
    | "error"
    | "primary"
    | "secondary"
    | "info"
    | "success"
    | "warning"
    | undefined;
}

const Input: FunctionComponent<IProps> = (props: IProps) => {
  return (
    <>
      <TextField
        required
        id="outlined-password-input"
        label={props.label}
        type={props.type}
        color={props.color}
        autoComplete="current-password"
        style={{ width: "50vw" }}
      />
    </>
  );
};

export default Input;

如何将主题颜色添加到文本字段的轮廓和字体颜色。在深色背景上，它会显示深色文字。

Typescript中如何使用全局样式，使用主题时会报错

【问题讨论】：

标签： css typescript material-ui

【解决方案1】：

 <TextField 
   InputProps={{style:{backgroundColor:"red",color:"blue"}}}
/>

【讨论】：