I have implemented the "styled" feature from Material UI to add styles to my components. Right now, I am in the process of cleaning up code to remove console errors.
Initially, I encountered this warning message: "Warning: React does not recognize the constantColors prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase constantcolors instead. If you accidentally passed it from a parent component, remove it from the DOM element".
For instance, the problem was related to passing all props to the DOM children element (common issue?). So, I refactored the code like this:
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;
}
`
)
And then I revised it to look like this:
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;
(...)
In most instances, this approach works for other components... but this time, I got a new error instead :)
"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of Styled(Component)".
What could be causing this? Typically, such refactoring operations work smoothly, especially when dealing with simple functions like an Icon from the Material-UI library :P
How can I resolve this issue? I haven't assigned any refs anywhere, and I'm unsure if I should?
In the DOM structure, it looks something like this:
{index === 0 && !isMobileDevice && (
<StyledAddCircleOutlined
onClick={() => handleAddField(name, field.value)}
constantColors
/>
)}