css prop

In most cases, you can use Atomic Props to complete UI development, but sometimes the Atomic Props provided by Fower cannot meet your needs. Because Fower’s atomic Props are only a subset of CSS, we will not integrate all CSS features into Fower. Fower has a special Atomic Prop called css Prop, which supports all CSS features.

Basic usage

The css Prop can receive a CSS object, in which you can write any CSS property. Some unpopular style properties that are not supported by Fower Atomic Props can be written in the css Prop.

Result

Loading...

Live Editor

<Box text4XL red500 css={{ textShadow: '1px 0 5px #FC0', textDecoration: 'underline', }} > Hi, Fower! </Box>

<Box
  text4XL
  red500
  css={{
    textShadow: '1px 0 5px #FC0',
    textDecoration: 'underline',
  }}
>
  Hi, Fower!
</Box>

info

CSS objects can be used in React-like frameworks only, not in Vue.js.

Nested selector

Sometimes, you may want to use CSS nested selectors. Fower supports nested syntax similar to Less/Sass/Stylus, but Fower is using JS object which is more structured and flexible, not a string.

Result

Loading...

Live Editor

<Box text4XL css={{ backgroundColor: '#edf2f7', ':hover': { backgroundColor: '#feebc8', }, '.title': { fontWeight: 'bold', }, span: { color: 'deeppink', }, }} > <div className="title">Nested demo</div> <span>Hi, Fower!</span> </Box>

<Box
  text4XL
  css={{
    backgroundColor: '#edf2f7',
    ':hover': {
      backgroundColor: '#feebc8',
    },
    '.title': {
      fontWeight: 'bold',
    },
    span: {
      color: 'deeppink',
    },
  }}
>
  <div className="title">Nested demo</div>
  <span>Hi, Fower!</span>
</Box>

Use with Atomic Props

If you like, you can use Atomic Props in CSS Props directly.

Result

Loading...

Live Editor

<Box css={{ p: 40, text2XL: true, red500: true, backgroundColor: '#feebc8', }} > Use Atomic Props in CSS Props </Box>

<Box
  css={{
    p: 40,
    text2XL: true,
    red500: true,
    backgroundColor: '#feebc8',
  }}
>
  Use Atomic Props in CSS Props
</Box>