如何全局配置MUI styled以避免重复编写shouldForwardProp？

当然有全局优化方案，核心思路是封装一个自定义的styled工具函数，提前配置好全局的shouldForwardProp规则，避免每次重复编写过滤逻辑。以下是两种实用方案：

方案一：约定自定义props前缀（推荐） #

通过约定自定义props以$开头，全局配置自动过滤所有带该前缀的props，无需逐个声明。这种方式扩展性强，无需维护黑名单。

步骤1：创建自定义styled工具 #

在项目的工具类文件（比如src/utils/styled.ts）中封装：

import { styled as muiStyled } from '@mui/material/styles';

// 全局配置：自动过滤所有以$开头的自定义props
const styled = muiStyled.withConfig({
  shouldForwardProp: (prop) => !prop.startsWith('$'),
});

export default styled;

步骤2：使用自定义styled创建组件 #

后续所有需要自定义props的组件，直接用这个封装好的styled：

import styled from '@/utils/styled';
import Typography from '@mui/material/Typography';

// 自定义props以$开头，无需再写shouldForwardProp
const Title = styled(Typography)<{ $isMain: boolean }>`
  font-size: ${({ $isMain }) => $isMain ? '2rem' : '1.5rem'};
  font-weight: ${({ $isMain }) => $isMain ? 700 : 400};
`;

方案二：全局维护自定义props黑名单 #

如果不想用前缀，也可以全局配置固定的黑名单，过滤指定的自定义props：

import { styled as muiStyled, defaultShouldForwardProp } from '@mui/material/styles';

// 全局配置：保留MUI默认转发的props，同时排除指定的自定义props
const styled = muiStyled.withConfig({
  shouldForwardProp: (prop) => 
    defaultShouldForwardProp(prop) && !['isMain', 'isHighlighted'].includes(prop),
});

export default styled;

使用时直接声明自定义props即可：

const Title = styled(Typography)<{ isMain: boolean }>`
  /* 样式逻辑 */
`;

原理说明 #

MUI的styled基于Emotion实现，Emotion提供了withConfig方法允许全局配置shouldForwardProp规则。封装一次后，所有组件复用该配置，彻底避免重复编写冗长的过滤声明，同时解决React的"无法识别自定义props"警告。

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