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/react'

Styling html element

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

Result

Loading...

Live Editor

function StyledElement() { const Text = styled('span') return ( <Text text3XL fontBold green400> Hello world </Text> ) }

function StyledElement() {
  const Text = styled('span')
  return (
    <Text text3XL fontBold green400>
      Hello world
    </Text>
  )
}

Styling any Component

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

Result

Loading...

Live Editor

function StyledAnyComponent() { const Button = ({ className }) => <button className={className}>Styled Button</button> const StyledButton = styled(Button) return <StyledButton textLG white bgGreen400 p-10 rounded-4 border-0 /> }

function StyledAnyComponent() {
  const Button = ({ className }) => <button className={className}>Styled Button</button>
  const StyledButton = styled(Button)

  return <StyledButton textLG white bgGreen400 p-10 rounded-4 border-0 />
}

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.

Result

Loading...

Live Editor

function StyledDemo() { const Item = styled('div', ['py4', 'px20', 'bgOrange300', 'bgGreen300--hover', 'fontBold']) return ( <Box toEvenly> <Item>A</Item> <Item>B</Item> <Item bgRed300>C</Item> </Box> ) }

function StyledDemo() {
  const Item = styled('div', ['py4', 'px20', 'bgOrange300', 'bgGreen300--hover', 'fontBold'])
  return (
    <Box toEvenly>
      <Item>A</Item>
      <Item>B</Item>
      <Item bgRed300>C</Item>
    </Box>
  )
}

Initial with object style

Result

Loading...

Live Editor

function StyledDemo() { const Item = styled('div', { py: '12', px20: true, bgOrange300: true, 'bgBlue300--hover': true, text4XL: true, textShadow: '1px 2px 2px #0cf', }) return ( <Box toEvenly> <Item>A</Item> <Item>B</Item> <Item bgRed300>C</Item> </Box> ) }

function StyledDemo() {
  const Item = styled('div', {
    py: '12',
    px20: true,
    bgOrange300: true,
    'bgBlue300--hover': true,
    text4XL: true,
    textShadow: '1px 2px 2px #0cf',
  })
  return (
    <Box toEvenly>
      <Item>A</Item>
      <Item>B</Item>
      <Item bgRed300>C</Item>
    </Box>
  )
}

Both

Result

Loading...

Live Editor

function StyledDemo() { const Item = styled('div', ['py4', 'px20', 'fontBold'], { bgOrange300: true, 'bgBlue300--hover': true, text4XL: true, textShadow: '1px 2px 2px #0cf', }) return ( <Box toEvenly> <Item>A</Item> <Item>B</Item> <Item bgRed300>C</Item> </Box> ) }

function StyledDemo() {
  const Item = styled('div', ['py4', 'px20', 'fontBold'], {
    bgOrange300: true,
    'bgBlue300--hover': true,
    text4XL: true,
    textShadow: '1px 2px 2px #0cf',
  })
  return (
    <Box toEvenly>
      <Item>A</Item>
      <Item>B</Item>
      <Item bgRed300>C</Item>
    </Box>
  )
}