如何为Material UI TextField添加自定义CSS颜色及解决TypeScript调用theme报错

问题1：TextField外边框、字体主题颜色配置（解决深色背景显示异常） #

有两种可选实现方式，按需选择即可：

方案1：全局主题统一配置 #

在项目根入口的主题定义处修改createTheme配置，全局统一适配深色模式样式，配置后所有TextField组件都会自动生效：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    mode: 'dark', // 明确声明深色模式，MUI会自动适配基础组件样式
    primary: {
      main: '#90caf9', // 自定义主色
    },
  },
  components: {
    // 全局覆盖TextField基础样式
    MuiTextField: {
      styleOverrides: {
        root: {
          width: '50vw', // 替代原组件内写的style属性，全局统一宽度
        },
      },
    },
    // 覆盖输入框边框、输入文字样式
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          color: '#ffffff', // 输入框内文字颜色
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: '#90caf9', // 未聚焦时外边框颜色
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: '#64b5f6', // hover状态边框颜色
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: '#42a5f5', // 聚焦状态边框颜色
          },
        },
      },
    },
    // 覆盖label文字样式
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: '#ffffff', // label默认颜色
          '&.Mui-focused': {
            color: '#90caf9', // label聚焦时颜色
          },
        },
      },
    },
  },
});

// 用ThemeProvider包裹根组件即可全局生效

方案2：仅自定义Input组件单独覆盖 #

如果不需要全局修改，只需要当前封装的Input组件适配，直接用styled封装即可：

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

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

const StyledTextField = styled(TextField)(({ theme }: {theme: Theme}) => ({
  width: '50vw',
  '& .MuiOutlinedInput-root': {
    color: theme.palette.common.white,
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.primary.light,
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.primary.main,
    },
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.primary.dark,
    },
  },
  '& .MuiInputLabel-root': {
    color: theme.palette.common.white,
    '&.Mui-focused': {
      color: theme.palette.primary.light,
    },
  }
}))

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

export default Input;

问题2：TypeScript中调用theme报错处理 #

常见报错原因和对应解决方案如下：

1. 未给theme参数指定类型：
   在styled的回调参数中主动声明Theme类型即可，参考上面方案2的代码，从@mui/material导入Theme类型后给参数加类型注解：({ theme }: {theme: Theme}) => {}
2. 自定义扩展了MUI主题字段导致类型不识别：
   如果自己给主题新增了自定义字段，需要做TS类型声明合并，在项目src目录下新建theme.d.ts声明文件：

import '@mui/material/styles';

declare module '@mui/material/styles' {
  // 扩展Theme类型，新增你自定义的字段
  interface Theme {
    custom: {
      bgColor: string;
      textColor: string;
    };
  }
  // 同步扩展ThemeOptions，保证createTheme时也能识别自定义字段
  interface ThemeOptions {
    custom?: {
      bgColor?: string;
      textColor?: string;
    };
  }
}

内容的提问来源于stack exchange，提问作者itxtalal