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

Question

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

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

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

Warning: React does not recognize the isLarge prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase islarge instead. If you accidentally passed it from a parent component, remove it from the DOM element.

（与myColor相同）

在另一个中，我被告知所有需要做的就是使用 shouldForwardProp 作为在第二个参数中返回布尔值的函数来决定应该在 tot 中传递哪些道具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"
})(
  ...
);

Answer 2

我对使用 @material-ui/core/styles 中的 styled 创建的组件的自定义道具也有类似的问题，这几乎让我发疯。使用 MUI 4.11 @emotion/styled 的解决方案对我不起作用。

作为一个有效的解决方案，我创建了一个中间组件，它不会将自定义道具传递给 DOM。

在上面的例子中，它看起来像

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

对我来说这是一个可行的解决方案，希望这对其他人也有帮助

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

Getting warning from props passed in MUI styled components related to React not recognizing it

javascript

emotion

reactjs

material-ui