使用MUI v5 styled创建带自定义属性的组件时遇兼容问题

你遇到的警告是因为自定义prop被转发到底层DOM元素，以及部分组件原生prop未被正确处理导致的。以下是具体解决方案：

核心问题原因 #

当使用@mui/system/styled包装组件时，默认会把所有传递给Styled组件的props（包括自定义的bool和组件原生的disableUnderline）转发给底层元素。但：

1. 自定义的bool不是DOM或Select组件支持的属性，会被React识别为无效DOM属性
2. 虽然disableUnderline是Select的合法prop，但如果未被组件正确拦截处理，也会意外传递到DOM

解决方法：使用shouldForwardProp过滤无效props #

通过shouldForwardProp配置，明确指定哪些props需要转发给底层的Select组件，排除自定义的属性，这样自定义属性只会在样式逻辑中使用，不会流向DOM。

修改后的代码：

// Imports 
import styled from '@mui/system/styled';
import Select, { SelectProps } from '@mui/material/Select';

// Extended props
interface SelectComponentAddedProps extends SelectProps {
  bool: boolean;
}

// Mui Styled Component
export const StyledSelect = styled(Select, {
  // 只转发除了自定义`bool`之外的所有props给Select组件
  shouldForwardProp: (prop) => prop !== 'bool'
})<SelectComponentAddedProps>(({ theme, bool }) => ({
  width: bool ? 'fit-content' : 300,
  textAlign: 'start',
  margin: '5px',
  fontWeight: 800,
}));

验证效果 #

修改后：

• 自定义的bool仅用于样式计算，不会被传递给Select或DOM元素
• disableUnderline作为Select的合法prop，会被组件正确处理，不会流向DOM，警告自然消失

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