Sandrina Pereira
Posted on August 4, 2020
CSS-in-JS lovers, please help me understand why I should prefer using styled over CSS prop.
Not knowing immediately if it's a "real" React component or just an HTML element (and which one) is driving me nuts. 😰
// MyComponentStyles.js
const Styles = {
item: css`
color: tomato;
`,
};
const Item = styled.div`
color: tomato;
`;
// MyComponent.js
return (
<ul>
{/* Approach #1 - I can easily tell what's the HTML tag
and spot any markup mistakes */}
<div css={Styles.item}>Pizza</div>
{/* Approach 2: - Can't tell if it's an actual component or
just a "css wrapper". */}
<Item>Pizza</Item>
</ul>
);
💖 💪 🙅 🚩
Sandrina Pereira
Posted on August 4, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.