为什么将自定义属性传递给 MUI 样式元素会导致出现 DOM 元素警告？

Question

我正在 React with Typescript 中使用 mui v5。我正在尝试设置 div 的样式，但在控制台中收到以下错误：

“警告：React 无法识别openFilterDrawerDOM 元素上的 prop。如果您故意希望它作为自定义属性出现在 DOM 中，请将其拼写为小写openfilterdrawer。如果您不小心从父组件传递了它，请将其从 DOM 中删除元素。”

我究竟做错了什么？

这是我的代码：

  type ChipsContainerProps = {
    openFilterDrawer: boolean
  }

 const ChipStyled = {
    Container: styled('div')<ChipsContainerProps>(
      ({ theme, openFilterDrawer }) => ({
          //leaving out irrelevant theme code
          ...(openFilterDrawer && {
            transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
            }),
            marginLeft: 0,
            paddingLeft: '0rem',
          }),
        },        
      }),
    ),
  }

Answer 1

问题是 MUI 正在将openFilterDrawer您传递给底层的 prop 转发div，并且由于openFilterDrawer不是divs 的有效 prop，React 会抛出该警告。

要清除警告，您应该传递一个包含shouldForwardProps函数的对象，以从结果中过滤 prop div。例如：

const ChipStyled = {
  Container: styled("div", {
    shouldForwardProp: (prop) => prop !== "openFilterDrawer" // <-- Here
  })<ChipsContainerProps>(({ theme, openFilterDrawer }) => ({
    //leaving out irrelevant theme code
    ...(openFilterDrawer && {
      transition: theme.transitions.create("margin", {
        easing: theme.transitions.easing.easeOut,
        duration: theme.transitions.duration.enteringScreen
      }),
      marginLeft: 0,
      paddingLeft: "0rem"
    })
  }))
};