将 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.
自 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.