React 自定义属性传到 DOM 元素上，而 React 不允许将自定义的非标准属性传递到 DOM 元素中，报错解决办法

案例：

index.tsx部分代码

 return <Styled.StyledListItem isReadMe={item?.isReadMe ?? false} sx={[.....]}> 

styled.ts 部分代码

import { styled} from '@mui/material/styles'
export const StyledListItem = styled(ListItem)<{isReadMe: boolean}>(({isReadMe, theme}) => ({ backgroundColor: !isReadMe ? theme.palette.mode === 'dark' ? ..... })) 

上面代码提示错误：React does not recognize the 'isReadMe' prop on a DOM element .

按照 github 上提供的解决办法，用$propsname 的方法，并没有成功，最终按照下面加shouldForwardProp的方式成功解决掉控制台的报错。

错误的原因是，isReadMe 属性直接传递到了 DOM 元素上，而 React 不允许将自定义的非标准属性传递到 DOM 元素中。

在 @mui/material 的 styled 方法中，当你在 ListItem 上自定义属性（例如 isReadMe）时，React 会将其视为 DOM 属性，但它并不是合法的 HTML 属性，从而引发错误。

修复方法

@mui/material 的 styled 方法允许你通过属性过滤的方式解决这个问题。只需将自定义属性过滤掉，不传递到 DOM 上即可。

以下是修改后的代码：

1. 修改 styled.ts 的 StyledListItem 定义

使用 shouldForwardProp 来控制哪些属性可以被传递到 DOM 中：

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

export const StyledListItem = styled(ListItem, {
  shouldForwardProp: (prop) => prop !== 'isReadMe', // 过滤掉自定义属性
})<{ isReadMe: boolean }>(({ isReadMe, theme }) => ({
  backgroundColor: !isReadMe
    ? theme.palette.mode === 'dark'
      ? 'your-dark-mode-color'
      : 'your-light-mode-color'
    : 'transparent',
}));

2. index.tsx 中代码保持不变

return <Styled.StyledListItem isReadMe={item?.isReadMe ?? false} sx={[...]} />;

解释

• shouldForwardProp: 是 @mui/material 提供的一个配置选项，用于指定哪些属性应该传递到 DOM 元素。我们在这里过滤掉了 isReadMe，使其不会传递到 DOM 中。
• styled: 通过 styled 方法的属性配置，可以灵活地处理自定义逻辑，同时避免 React 的警告。

修复后，isReadMe 属性只会在 StyledListItem 的内部逻辑中使用，而不会传递到最终的 DOM 元素上，从而解决了这个错误。