CODEWITHSUNDEEP
reactjsstyled-components
Fellow Stranger
Fellow Stranger

Reputation: 34023

Advantages writing CSS as JS object vs normal CSS?

Since v3.3.0 styled-components has first-class object support:

const Button = styled.button({
  color: 'blue'
})

What advantages are there to write it like above compared to the "standard" CSS way with template literals:

const Button = styled.button`
  color: blue;
`

Upvotes: 1

Views: 153

Answers (1)

OliverRadini
OliverRadini

Reputation: 6466

There doesn't seem to be any advantages or disadvantages, other than those implied by the difference in syntax.

This thread and the documentation both imply that it's simply a matter of syntax preference:

From the docs:

styled-components optionally supports writing CSS as JavaScript objects instead of strings. This is particularly useful when you have existing style objects and want to gradually move to styled-components.

From the thread:

We just released styled-components v3.3.0 with first-class object support! (finally) Lots of people have been asking for this for a while, here's what it looks like: const Button = styled.button({ color: 'blue' }) Note that this fully optional, we ❤️ template literals and writing actual CSS—this is just an option for folks who prefer to write their CSS as objects.

Upvotes: 1

Related Questions