Tengo un componente con estilo que necesita recibir accesorios para decidir cómo se debe diseñar. Se parece a esto:
const StyledTypography = styled(Typography)( ({ myColor = "black", isLarge = false }) => ({ "&&": { fontSize: isLarge ? 30 : 16, border: `1px solid ${myColor}`, margin: 10, color: myColor } }) ); Desafortunadamente, isLarge genera la siguiente advertencia:
Advertencia: React no reconoce el accesorio
isLargeen un elemento DOM. Si intencionalmente desea que aparezca en el DOM como un atributo personalizado,islargeen minúsculas en su lugar. Si lo pasó accidentalmente desde un componente principal, elimínelo del elemento DOM.
(Lo mismo con myColor )
En otro hilo , me dijeron que todo lo que se debe hacer es usar shouldForwardProp como una función que devuelve un valor booleano en el segundo parámetro para decidir qué accesorios se deben pasar al DOM DOM:
const StyledTypography = styled(Typography, { shouldForwardProp: () => false })( ... );Desafortunadamente esto no funciona.
¿Hay alguna forma de hacer esto?
Aquí hay una aplicación de muestra funcional con las advertencias y todo: https://codesandbox.io/s/crimson-fast-qll47?file=/src/App.js
Prueba esto
import styled from '@emotion/styled' const StyledTypography = styled(Typography, { shouldForwardProp: (prop) => prop !== "myColor" && prop !== "isLarge" })( ... ); const StyledButton = styled(Button, { shouldForwardProp: (prop) => prop !== "myColor" })( ... );Tengo un problema similar con un accesorio personalizado en un componente creado con el styled de @material-ui/core/styles y casi me vuelve loco. Usando MUI 4.11, la solución con @emotion/styled no funcionó para mí.
Como solución que funcionó, creé un componente intermedio que no pasa los accesorios personalizados al DOM.
En el caso anterior, se verá algo así como
const TypographyComponent = ({myColor, isLarge, ...props}) => <Typography {...props} />; const StyledTypography = styled(TypographyComponent)( ({ myColor = "black", isLarge = false }) => ({ "&&": { fontSize: isLarge ? 30 : 16, border: `1px solid ${myColor}`, margin: 10, color: myColor } }) );Para mí, esta fue una solución viable, espero que esto también ayude a otros.