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.

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO
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.

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

Use with Atomic Props#

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

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