Object or Template Strings?

Many CSS-in-JS libraries support the template strings to write CSS, such as styled-components, Emotion, they are written like this:

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

Does Fower support template strings? The answer is: not supported.

In fact, you don’t need to write raw CSS styles in most scenarios. Atomic Props can be used to complete most UI development:

Result

Loading...

Live Editor

<Box green400 bgGray200 p4 f5> Fower </Box>

<Box green400 bgGray200 p4 f5>
  Fower
</Box>

For styles that cannot be done with atomic props, you can use CSS Prop:

Result

Loading...

Live Editor

<Box green400 bgGray100 p4 f5 css={{ textShadow: '1px 2px 4px #999', wordBreak: 'normal', }} > Fower </Box>

<Box
  green400
  bgGray100
  p4
  f5
  css={{
    textShadow: '1px 2px 4px #999',
    wordBreak: 'normal',
  }}
>
  Fower
</Box>

CSS Prop does not support template strings, you can only use JS objects.