TypeScript中为MUI v5 AppBar组件添加自定义样式报错

问题描述 #

在TypeScript环境下为MUI v5的AppBar组件添加模糊背景效果时，调用自定义的bgBlur函数后出现类型匹配报错，错误提示：

No overload matches this call. The last overload gave the following error.

原bgBlur函数及styled组件调用代码如下：

原bgBlur函数 #

import { alpha } from '@mui/material/styles';

export function bgBlur(props: { color: any; blur?: any; opacity?: any; imgUrl?: any; }) {
  const color = props?.color || '#000000';
  const blur = props?.blur || 6;
  const opacity = props?.opacity || 0.8;
  const imgUrl = props?.imgUrl;

  if (imgUrl) {
    return {
      position: 'relative',
      backgroundImage: `url(${imgUrl})`,
      '&:before': {
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 9,
        content: '""',
        width: '100%',
        height: '100%',
        backdropFilter: `blur(${blur}px)`,
        WebkitBackdropFilter: `blur(${blur}px)`,
        backgroundColor: alpha(color, opacity),
      },
    };
  }

  return {
    backdropFilter: `blur(${blur}px)`,
    WebkitBackdropFilter: `blur(${blur}px)`,
  };
}

原styled组件调用 #

const StyledAppBar = styled(AppBar)(({ theme }) => ({
  ...bgBlur({ color: theme.palette.background.default }),
  boxShadow: "none",
})) as typeof AppBar;

解决方案 #

问题根源在于bgBlur函数的参数和返回值使用了any类型，导致TypeScript无法正确推断样式对象的类型，与MUI styled组件期望的CSS类型不匹配。通过为函数添加明确的TypeScript类型约束即可解决：

1. 修改bgBlur函数，添加类型约束 #

导入MUI的CSSObject类型，为函数参数和返回值定义明确类型：

import { alpha } from '@mui/material/styles';
import type { CSSObject } from '@mui/system';

// 定义参数的明确类型
type BgBlurProps = {
  color: string;
  blur?: number;
  opacity?: number;
  imgUrl?: string;
};

export function bgBlur(props: BgBlurProps): CSSObject {
  const color = props.color || '#000000';
  const blur = props.blur ?? 6;
  const opacity = props.opacity ?? 0.8;
  const imgUrl = props.imgUrl;

  if (imgUrl) {
    return {
      position: 'relative',
      backgroundImage: `url(${imgUrl})`,
      '&:before': {
        position: 'absolute',
        top: 0,
        left: 0,
        zIndex: 9,
        content: '""',
        width: '100%',
        height: '100%',
        backdropFilter: `blur(${blur}px)`,
        WebkitBackdropFilter: `blur(${blur}px)`,
        backgroundColor: alpha(color, opacity),
      },
    };
  }

  return {
    backdropFilter: `blur(${blur}px)`,
    WebkitBackdropFilter: `blur(${blur}px)`,
  };
}

2. 简化styled组件调用 #

移除不必要的类型断言，因为styled(AppBar)会自动继承AppBar的组件类型：

const StyledAppBar = styled(AppBar)(({ theme }) => ({
  ...bgBlur({ color: theme.palette.background.default }),
  boxShadow: "none",
}));

关键说明 #

• 使用CSSObject约束函数返回值，确保返回的样式对象符合MUI的CSS属性规范，让TypeScript能正确校验类型匹配。
• 为参数定义明确类型（如blur为number、opacity为number），避免any类型导致的类型推断失效。
• 移除as typeof AppBar断言，styled函数会自动生成继承自原组件的类型，无需额外手动断言。

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