如何防止将道具传递给内部样式组件

Posted 2023-03-15

【中文标题】如何防止将道具传递给内部样式组件

【英文标题】：How to prevent passing props to inner styled component

【发布时间】：2022-01-03 04:42:04

【问题描述】：

我正在尝试在材质 UI 组件之上进行合成，仅通过给定的道具更改样式。

import  Typography  from "@mui/material";
import  styled  from "@mui/system";

type MyTypographyExtraProps =  isEven?: boolean ;

export const MyTypography = styled(Typography)<MyTypographyExtraProps>(
  ( theme, isEven ) => `
   color: $theme.palette.common.black;

   ::after 
      content: "";
      display: inline-block;
      height: $theme.spacing(2);
      width: $theme.spacing(2);
      border-radius: $theme.spacing(2);
      background-color: $theme.palette[isEven ? "success" : "error"].main;
   
  `,
);

styled 函数将我的 isEven 属性传递给 Material Typography 组件，然后 Typography 将它传递给 DOM，所以我收到了警告

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

如何在传递给排版元素之前省略类型？

我可以制作另一个组件并消除该层中的道具，但我很想知道是否有任何方法可以在没有额外组件的情况下做到这一点。

【参考方案1】：

Material docs 建议了一个函数来消除 props 的传递。

shouldForwardProp：说明必须将哪些道具传递给样式化的给定组件。

export const MyTypography = styled(MuiTypography, 
  shouldForwardProp: prop => prop !== "isEven", // ⭐
)<MyTypographyExtraProps>(
  ( theme, isEven ) => `
   color: $theme.palette.common.black;

   ::after 
      content: "";
      display: inline-block;
      height: $theme.spacing(2);
      width: $theme.spacing(2);
      border-radius: $theme.spacing(2);
      background-color: $theme.palette[isEven ? "success" : "error"].main;
   
  `,
);