typescript - วิธีป้องกันไม่ให้ส่ง props ไปยัง component ที่มีสไตล์ด้านใน

ฉันกำลังพยายามสร้างงานเรียบเรียงบนส่วนประกอบ 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};
   }
  `,
);

ฟังก์ชัน styled ส่ง props isEven ของฉันไปยังคอมโพเนนต์ Material Typography และ Typography ส่งต่อไปยัง DOM ดังนั้นฉันจึงได้รับคำเตือน

คำเตือน: React ไม่รู้จัก prop isEven บน element ของ DOM หากคุณต้องการให้มันปรากฏใน DOM เป็น attribute แบบกำหนดเอง ให้เขียนเป็นตัวพิมพ์เล็ก iseven แทน หากคุณเผลอส่งมันมาจาก component แม่ ให้ลบออกจาก element ของ DOM

ฉันจะละเว้นประเภทก่อนที่จะส่งไปยังองค์ประกอบตัวอักษรได้อย่างไร?

ฉันสามารถสร้างคอมโพเนนต์อีกตัวและกำจัด props ในเลเยอร์นั้นได้ แต่ฉันสงสัยว่ามีวิธีใดที่จะทำได้โดยไม่ต้องมีคอมโพเนนต์เพิ่มเติมหรือไม่

คำตอบ #1

เอกสารวัสดุแนะนำฟังก์ชันเพื่อกำจัด 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};
   }
  `,
);

หมายเหตุ: shouldForwardProps และ skipSx props ไม่สอดคล้องกันอย่างสมบูรณ์หากคุณต้องการป้องกัน sx และ props อื่น ๆ พร้อมกัน
สำหรับข้อมูลเพิ่มเติมดูที่ปัญหา GitHub นี้