材料UI＆＃x2B;用道具抛出的样式“ React”无法识别DOM元素上的Zindex Prop。

Question

我正在努力争论错误 - ＆gt; React无法在DOM元素上识别Zindex Prop。 当我使用MUI组件并用道具设计时，它会发生。

代码示例：

样式：

import {Drawer as DrawerBase, styled} from '@material-ui/core'

interface DrawerProps {
  zIndex: number
}
export const Drawer = styled(DrawerBase)<Theme, DrawerProps>(({zIndex}) => ({
  zIndex
}))

实现：

<Drawer zIndex={10} />

我正在使用： “@Material-ui/core”：“^4.12.3”

是否有可能防止将道具传递给DOM元素？

Answer 1

不幸的是，材料UI的“样式”语法令人困惑。但是，这应该起作用：

interface DrawerProps {
  zIndex: number
}

export const Drawer = styled(DrawerBase, {
  shouldForwardProp: (prop) => prop !== 'zIndex',
})<Theme, DrawerProps>(({zIndex}) => ({
  zIndex
}))

“应该ForwardProp”也是一个不幸的名称，因为听起来像属性Zindex并未转发，但实际上可以访问。

希望它有帮助。

Answer 2

我以前从未在MUI中使用过样式的组件，所以请用一粒盐来做什么。但是我有一些想法：

您是从'@youteral-ui/core'导入样式，但是您正在调用style> style功能（没有“ D”）。

查看 MUI文档使用样式组件使用它的方式，我们传统上使用了使用CSS语法的样式组件。我希望您的代码看起来像这样：

const Drawer = styled(DrawerBase)`
  z-index: ${props => props.zIndex};
`;

DOM元素需要“ z index”，而不是“ zindex”。

您的代码段还具有带有您的const抽屉的错字，其中您已经排除了“ S”：cont。

希望这会有所帮助。