@fower/styled

The styled API for React-like frameworks, such as React, React Native, Preact...

Installation

npm

npm install @fower/styled

yarn

yarn add @fower/styled

pnpm

pnpm add @fower/styled

API

import { styled } from '@fower/styled'

Usage

Styling HTML element:

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 Component:

Result

Loading...

Live Editor

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

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

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