I'm currently working on customizing the styling of Material UI components by utilizing props. I want to create a unique composition solely based on changing styles through props.
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};
}
`,
);
Using the styled function, my isEven prop gets passed to the Material Typography component which then passes it to the DOM, resulting in a warning message:
Warning: React does not recognize the
isEvenprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseiseveninstead. If you accidentally passed it from a parent component, remove it from the DOM element.
I'm wondering if there's a way to bypass the type declaration before it reaches the typography element to avoid this warning.
One solution could be creating an additional component to strip out the props in that layer, but I'm interested in exploring any potential methods to achieve this without adding another component.