使用对象还是模板字符串?

很多 CSS-in-JS 库都支持用模板字符串的方式来编写 CSS,如 styled-componentsEmotion,它们的写法是这样的:

const Button = styled.button`  padding: 32px;  background-color: hotpink;  font-size: 24px;  border-radius: 4px;  color: black;  font-weight: bold;  &:hover {    color: white;  }`

那 Fower 支持模板字符串吗?答案是:不支持

实际上,大部分场景你并不需要写原始 CSS 样式,利用原子属性 (Atomic Props) 能完成大部分 UI 开发:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

对于原子属性无法完成的样式,你可以 CSS Prop 完成:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

CSS Prop 不支持模板字符串,你只能使用 JS 对象。

Fower 的 styled Api 也是可以使用自定义 CSS 样式的,同样,已依然只能使用 JS 对象。

const Button = styled('button', 'p-10 f5', {  textShadow: '1px 2px 4px #999',  wordBreak: 'normal',})