Styled Components

You can use styled api to create a Fower component, then you can use atomic props with the component.

info

styled can be used in all React-like frameworks, such as React, React-native, Preact, etc.

Import#

import { styled } from '@fower/styled'

Styling html element#

The element wrapped by styled can use atomic props to change the style of the component.

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

Styling any Component#

styled can style any component as long as it accepts a className prop.

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

With initial atomic props#

In order to better reuse styles, when using styled to create a component, we can initialize some styles for the component.

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

Initial with object style#

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

Both#

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