警告：React 无法识别 DOM 元素上的 `isNarrow` 属性 - Material UI 组件答案

【问题标题】：Warning: React does not recognize the `isNarrow` prop on a DOM element - Material UI Component警告：React 无法识别 DOM 元素上的 `isNarrow` 属性 - Material UI 组件
【发布时间】：2021-03-12 11:15:34
【问题描述】：

我正在尝试设置材质 UI 组件的样式，这是我的代码：

export const CardContentStyled = styled(CardContent)`
  width: ${props => (props.isNarrow ? 'calc(100% - 60px)' : 'calc(100% - 200px)')};
  box-sizing: border-box;
  position: relative;
  padding: 0 60px;
`;

然后从组件中将所有内容导入为 ui 并像这样使用它：

<ui.CardContentStyled isNarrow={isNarrow}>
   whatever
</ui.CardContentStyled>

它有效，但我收到此错误：

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

我尝试了在这里找到的所有东西，我认为唯一有效的是：

React does not recognize the `isActive` prop on a DOM element - styled-components

但这似乎有点hacky，也许有更好的方法。

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

如果您查看卡片内容组件的来源，您就会明白它会将所有其他道具传递给“div”作为 {...others}。 isNarrow 是导致错误的 div 的“非默认”道具。

如果你能忍受这个错误，那很好。

如果你不希望出现错误，那真的不比简单地自定义创建自己的组件比使用带有样式的 CardContent 更难。

卡片内容source

export const styles = {
  /* Styles applied to the root element. */
  root: {
    padding: 16,
    '&:last-child': {
      paddingBottom: 24,
    },
  },
};

const CardContent = React.forwardRef(function CardContent(props, ref) {
   /* add isNarrow below and apply your own conditional style */
  const { classes, className, isNarrow, component: Component = 'div', ...other  } = props; 

  return <Component className={clsx(classes.root, className)} ref={ref} {...other} />;
});

【讨论】：