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

kninwzqo 于 2023-03-12 发布在 React

关注(0)|答案(3)|浏览(162)

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

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

不幸的是，isLarge会导致以下警告：
警告：React无法识别DOM元素上的isLarge prop。如果您有意希望它在DOM中显示为自定义属性，请将其拼写为小写的islarge。如果您意外地从父组件传递了它，请将其从DOM元素中删除。
(Same带有myColor）
在另一个thread中，我被告知需要做的只是使用shouldForwardProp作为函数，在第二个参数中返回一个布尔值，以决定应该将哪些 prop 传入DOM DOM：

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

不幸的是，这不起作用。
有办法做到这一点吗？
下面是一个包含警告和所有内容的示例应用程序：https://codesandbox.io/s/crimson-fast-qll47?file=/src/App.js

reactjs

来源：https://stackoverflow.com/questions/71451558/getting-warning-from-props-passed-in-mui-styled-components-related-to-react-not

3条答案

按热度按时间

n3ipq98p1#

试试这个

import styled from '@emotion/styled'

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

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

赞(0）回复(0）举报 2023-03-12

8i9zcol22#

我有一个类似的问题，用styled创建的组件上的自定义 prop 从@material-ui/core/styles，它几乎让我疯了。使用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
    }
  })
);

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

赞(0）回复(0）举报 2023-03-12

zwghvu4y3#

自定义情感 prop 转发

从**@情感/是-属性-有效使用是属性-有效**

示例：

import isPropValid from '@emotion/is-prop-valid'
import styled from '@emotion/styled'

const H1 = styled('h1', {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'color'
})(props => ({
  color: props.color
}))

render(<H1 color="lightgreen">This is lightgreen.</H1>)

注：对于** typescript **，请执行以下操作：

const H1 = styled('h1', {
  shouldForwardProp: prop => typeof prop === "string" && isPropValid(prop)
})(props => ({
  color: props.color
}))

检查文档

赞(0）回复(0）举报 2023-03-12

我来回答

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

3条答案

自定义情感 prop 转发

示例：

相关问题

热门标签

最新问答