将 CSS 写为 JS 对象与普通 CSS 相比有什么优势?

Advantages writing CSS as JS object vs normal CSS?

自 v3.3.0 styled-components 具有第一个 class 对象支持:

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

与使用模板文字的 "standard" CSS 方式相比,像上面这样写有什么优势:

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

除了语法差异暗示的优点或缺点外,似乎没有任何优点或缺点。

This thread and the documentation 都暗示这只是语法偏好的问题:

来自文档:

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.

来自线程:

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.