扩展MUI TextFieldProps报错，求助正确使用TextFieldProps的方法

报错原因 #

你遇到的An interface can only extend an object type or intersection of object types with statically known members错误，是因为MUI的TextFieldProps在部分版本中是泛型类型，或者其内部结构包含TypeScript无法静态解析的动态成员，导致接口继承时无法识别其为合法的对象类型。

解决方案 #

有两种可行的修复方式：

方案1：使用交叉类型替代接口继承 #

把接口继承改为类型别名的交叉类型，TypeScript对交叉类型的兼容性更好，能正确合并泛型类型的结构：

import TextField, { TextFieldProps } from '@mui/material/TextField';
import { colorThemes } from '../../variables/style.variables';

// 用交叉类型替代interface extends
type BDBTextFieldProps = TextFieldProps & {
  customColor?: string;
};

export const BDBTextField = ({
  customColor = colorThemes.primary,
  ...props
}: BDBTextFieldProps) => {
  return (
    <TextField
      {...props}
      sx={{
        '& label.Mui-focused': {
          color: customColor,
        },
        '& .MuiOutlinedInput-root': {
          '&.Mui-focused fieldset': {
            borderColor: customColor,
          },
        },
      }}
    />
  );
};

方案2：明确指定TextFieldProps的泛型参数 #

如果TextFieldProps是泛型类型，你可以明确传入其泛型参数（比如针对input类型的TextField），让TypeScript能解析出具体的静态对象结构，再用接口继承：

import TextField, { TextFieldProps } from '@mui/material/TextField';
import { colorThemes } from '../../variables/style.variables';

// 明确指定TextFieldProps的泛型参数（这里以"input"为例，根据实际场景调整）
interface BDBTextFieldProps extends TextFieldProps<'input'> {
  customColor?: string;
}

export const BDBTextField = ({
  customColor = colorThemes.primary,
  ...props
}: BDBTextFieldProps) => {
  return (
    <TextField
      {...props}
      sx={{
        '& label.Mui-focused': {
          color: customColor,
        },
        '& .MuiOutlinedInput-root': {
          '&.Mui-focused fieldset': {
            borderColor: customColor,
          },
        },
      }}
    />
  );
};

说明 #

• 方案1更通用，不需要关注TextFieldProps的泛型细节，适合大多数场景；
• 方案2适合需要严格限定TextField组件类型（比如区分input、textarea等）的场景。

内容的提问来源于stack exchange，提问作者Paweł Ciszewski