The {...props} order bug is the one I've seen bite teams the most, especially once a design system wraps every icon in its own component and nobody remembers to check spread order six months later. I'd add one more trap to your edge case list: a global .icon { width: 24px !important } left over from an old reset will beat both the size prop and correct spread order, and it looks exactly like a broken component so people go debugging JSX for an hour before checking the stylesheet. Worth grepping for !important on icon classes before blaming the component.
Tarun Sharma
React.js Frontend Web Developer | Next.js Specialist
Thanks for reading and for the great tip! I’ll definitely look into adding this edge case to the article. Also, really appreciate you sharing that real-world issue from your project — awesome feedback!
Glad it's useful. That !important trap is easy to miss since the symptom looks exactly like a broken component, not a stylesheet issue, so it's worth calling out explicitly.
The {...props} order bug is the one I've seen bite teams the most, especially once a design system wraps every icon in its own component and nobody remembers to check spread order six months later. I'd add one more trap to your edge case list: a global .icon { width: 24px !important } left over from an old reset will beat both the size prop and correct spread order, and it looks exactly like a broken component so people go debugging JSX for an hour before checking the stylesheet. Worth grepping for !important on icon classes before blaming the component.