DEV Community

Discussion on: CSS-in-JS - styled vs css prop

Collapse
 
klaytonfaria profile image
Klayton Faria

Yo!
I like to use styled, since css prop depends on a bit more setup using babel or macro to reach the same result. For me, It really seems a decision-based in code readability and comprehension... Sometimes it's s driving me nuts also haha... But I rather keep it simple with less setup and additional imports and try to think in names to describe my component as a "css wrapper / styled element" than a component itself (E.g. ItemStyled).

// MyComponentStyles.js
export default {
    item: ({theme, color}) => css`
         color: ${color};
         background-color: ${theme.primary};
   `
}
// MyComponent.js
import AnotherComponent from './AnotherComponent';
import Styles from './MyComponentStyles';

const ItemStyled = styled.div(Styles.item);
const AnotherComponentStyled = styled(AnotherComponent)(Styles.item);

... 
<ItemStyled color="tomato">pizza</ItemStyled>
...