Contents
Outline
When you use Emtoin to develop the React project, sometimes you see the following error.
console.error
Warning: React does not recognize the `backgroundColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at button
...
In this blog post, I will explain why the error occurs and how to solve it.
Why the React does not recognize the XXXXX prop on a DOM element error occurs
When you use Emotion in the React project, you apply the style like the following.
const StyledButton = styled('button')`
background-color: red;
`
At this time, when you want to change the style dynamically with Emotion, you use Props like the following.
interface StyledProps {
readonly backgroundColor?: string
}
const StyledButton = styled('button')<StyledProps>`
background-color: ${({ backgroundColor }) =>
backgroundColor != null ? backgroundColor : 'read'};
`
The current code is that the style is applied to the basic HTML tag. To apply the dynamic style to the component that is already created, you write the code like the following.
import { Button } from '@mui/material'
interface StyledProps {
readonly backgroundColor?: string
}
const StyledButton = styled(Button)<StyledProps>`
background-color: ${({ backgroundColor }) =>
backgroundColor != null ? backgroundColor : 'read'};
`
The example code is that the dynamic style is applied to the <Button /> component of the MUI library.
If you apply the dynamic style to the premade component like in this example, the following error occurs.
console.error
Warning: React does not recognize the `backgroundColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `backgroundcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at button
This error occurs because backgroundColor does not exists in Props of the <Button /> component provided by MUI.
Emotion basically passes the Props, that passed from the parent component, to the style target component. So, an error like this occurs.
shouldForwardProp
To solve this issue, Emotion provides the shouldForwardProp option.
If you use the shouldForwardProp option, you can filter the Props, that is from the parent compoent, to the style target component.
import { Button } from '@mui/material'
import type { ButtonProps } from '@mui/material'
interface StyledProps {
readonly backgroundColor?: string
}
const StyledButton = styled(Button, {
shouldForwardProp: (propName) => propName !== 'backgroundColor',
})<StyledProps & ButtonProps>`
${(props) =>
props.backgroundColor != null
? `background-color: ${props.backgroundColor};`
: ''}
`
The <Button /> component of MUI has ButtonProps. And, we’ve defined StyledProps for the style.
import type { ButtonProps } from '@mui/material'
interface StyledProps {
readonly backgroundColor?: string
}
const StyledButton = styled(Button, ...)<StyledProps & ButtonProps>`
...
`
By setting the StyledProps and ButtonProps defined in this way to be used together, the parent component can use the Props of the <Button /> component of the MUI, and also specify the props data we created.
And then, use the shouldForwardProp option to pass only the Props needed to the style target component like the following.
const StyledButton = styled(Button, {
shouldForwardProp: (propName) => propName !== 'backgroundColor',
})<StyledProps & ButtonProps>`
...
`
Then the styled function passes the filtered result of shouldForwardProp to the style target component, so the React does not recognize the XXXXX prop on a DOM element error can be resolved.
Completed
Done! we’ve seen why the React does not recognize the XXXXX prop on a DOM element error occurs and how to solve it, when we style the existing component by Emotion.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
