从与 React 相关的 MUI 样式组件中传递的 props 中获取警告，无法识别它

Question

我有一个样式化的组件，需要接收 props 来决定它应该如何设计样式。看起来像这样：

const StyledTypography = styled(Typography)(
  ({ myColor = "black", isLarge = false }) => ({
    "&&": {
      fontSize: isLarge ? 30 : 16,
      border: `1px solid ${myColor}`,
      margin: 10,
      color: myColor
    }
  })
);

不幸的是isLarge会导致以下警告：

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

（与 相同myColor）

在另一个线程中，我被告知需要做的就是用作shouldForwardProp在第二个参数中返回布尔值的函数来决定应将哪些道具传递给 DOM DOM：

const StyledTypography = styled(Typography, { shouldForwardProp: () => false })(
 ...
);

不幸的是这不起作用。

有办法做到这一点吗？

这是一个包含警告和所有内容的工作示例应用程序：https://codesandbox.io/s/crimson-fast-qll47 ?file=/src/App.js

Answer 1

尝试这个

import styled from '@emotion/styled'

const StyledTypography = styled(Typography, {
  shouldForwardProp: (prop) => prop !== "myColor" && prop !== "isLarge"
})(
  ...
);

const StyledButton = styled(Button, {
  shouldForwardProp: (prop) => prop !== "myColor"
})(
  ...
);