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

Question

我正在尝试在 material 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};
   }
  `,
);

样式化函数将我的 isEven 属性传递给 Material Typography 组件，Typography 将其传递给 DOM，所以我收到警告

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

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

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

Answer 1

Material docs 建议一个函数来消除传递的道具。

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};
   }
  `,
);

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

How to prevent passing props to inner styled component

emotion

typescript

material-ui