Estoy usando "estilo" de material ui para estilizar mis componentes. Ahora, estoy limpiando el código de los errores de la consola.

Al principio, estaba teniendo algo así: "Advertencia: React no reconoce el elemento constantColors en un elemento DOM. Si intencionalmente desea que aparezca en el DOM como un atributo personalizado, escríbalo como colores constantcolors en minúsculas. Si accidentalmente pasó de un componente principal, elimínelo del elemento DOM".

Como por ejemplo, el problema estaba en pasar todos los accesorios al elemento DOM child (¿problema conocido?) Entonces, este código:

 export const StyledAddCircleOutlined = styled(AddCircleOutline)( ({ theme, constantColors = false }) => css` color: ${constantColors ? theme.palette.success.main : 'none'}; transition: all 1s ease; cursor: pointer; :hover { color: ${constantColors ? 'none' : theme.palette.success.main}; opacity: ${constantColors ? 0.6 : 'none'}; } :active { color: ${theme.palette.success.light}; transition: all 5ms ease; } ` )

fue refactorizado por mí a tal cosa:

 export const StyledAddCircleOutlined = styled( ({ theme, constantColors = false, ...rest }) => <AddCircleOutline {...rest} /> )( ({ theme, constantColors = false }) => css` color: ${constantColors ? theme.palette.success.main : 'none'}; transition: all 1s ease; cursor: pointer;

(...)

Y en la mayoría de los casos esto funciona en otros componentes... pero no esta vez. Esta vez, solo tengo un nuevo error en su lugar :)

"Advertencia: los componentes de la función no pueden recibir referencias. Los intentos de acceder a esta referencia fallarán. ¿Quería usar React.forwardRef()? Verifique el método de representación de Styled(Component) "

Que esta pasando ? Por lo general, dicho refactor funciona, ni siquiera es una función compleja, es solo un ícono de la biblioteca material-ui: P

¿Cómo arreglar eso? No estoy dando referencias en ningún lado y no sé si debería hacerlo.

En la estructura DOM se ve así:

 {index === 0 && !isMobileDevice && ( <StyledAddCircleOutlined onClick={() => handleAddField(name, field.value)} constantColors /> )}