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