Cómo prevenir el paso de props al componente interno con estilo.

Estoy tratando de hacer una composición encima de los componentes de Material UI cambiando solamente el estilo a través de props dados.

tsx
import { Typography } from “@mui/material”;
import { styled } from “@mui/system”;

type MyTypographyExtraProps = { isEven?: boolean };

export const MyTypography = styled(Typography)(
({ 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};

   }

,
);

La función styled pasa mis props de isEven al componente de Material Typography, y Typography lo pasa al DOM, por lo que obtengo la advertencia:

Advertencia: React no reconoce la prop isEven en un elemento DOM. Si desea que aparezca intencionalmente en el DOM como un atributo personalizado, escríbalo en minúscula como iseven en su lugar. Si lo pasó por accidente desde un componente padre, elimínelo del elemento DOM.

¿Cómo puedo omitir el tipo antes de que se pase al elemento de típografia?

Puedo hacer otro componente y eliminar las props en ese nivel, pero estoy interesado en saber si hay alguna manera de hacerlo sin un componente extra.

davy.ai

June 3, 2023 at 1:52 pm

Desafortunadamente, no hay forma de omitir el tipo isEven antes de que se le pase directamente al elemento Typography. Como indica el mensaje de advertencia, React no reconoce propiedades personalizadas en elementos DOM, por lo que siempre se pasará al componente Typography como una propiedad.

La mejor solución para evitar el mensaje de advertencia sería crear un componente envolvente que acepte la propiedad isEven y pasarlo al componente MyTypography. De esta manera, el componente Typography nunca recibirá directamente la propiedad isEven y se eliminará el mensaje de advertencia.

type MyTypographyProps = { isEven?: boolean };

export const MyCustomTypography: React.FC<mytypographyprops> = ({isEven, ...typographyProps}) => (
  <mytypography {...typographyprops}="" iseven="{isEven}"></mytypography>
)

En este componente envolvente, desestructuramos la propiedad isEven de las props que se pasan al componente, y pasamos las props restantes al componente MyTypography, que ahora está recibiendo la propiedad isEven de un componente personalizado y no directamente del componente padre.

Answer

davy.ai

June 3, 2023 at 1:52 pm
Desafortunadamente, no hay forma de omitir el tipo isEven antes de que se le pase directamente al elemento Typography. Como indica el mensaje de advertencia, React no reconoce propiedades personalizadas en elementos DOM, por lo que siempre se pasará al componente Typography como una propiedad.

La mejor solución para evitar el mensaje de advertencia sería crear un componente envolvente que acepte la propiedad isEven y pasarlo al componente MyTypography. De esta manera, el componente Typography nunca recibirá directamente la propiedad isEven y se eliminará el mensaje de advertencia.
```
type MyTypographyProps = { isEven?: boolean };

export const MyCustomTypography: React.FC<mytypographyprops> = ({isEven, ...typographyProps}) => (
  <mytypography {...typographyprops}="" iseven="{isEven}"></mytypography>
)
```
En este componente envolvente, desestructuramos la propiedad isEven de las props que se pasan al componente, y pasamos las props restantes al componente MyTypography, que ahora está recibiendo la propiedad isEven de un componente personalizado y no directamente del componente padre.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo prevenir el paso de props al componente interno con estilo.

Answer

davy.ai