Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up

⚡ Toolkit for component-oriented styling

License

NotificationsYou must be signed in to change notification settings

styletron/styletron

Repository files navigation

Styletron logo

test workflow

Styletron is an universal toolkit for component-oriented styling. It falls into the CSS in JS category. Styletron works great with React but can be used with other frameworks or plain JS as well.

Go to our documentation atstyletron.org!

Usage with React

import{styled}from"styletron-react";// Create a styled component by passing an element name and a style objectconstRedAnchor=styled("a",{color:"red"});<RedAnchorhref="/foo">Hello</RedAnchor>;// Or pass a function that takes props and returns a style objectconstPanel=styled("div",props=>{return{backgroundColor:props.$alert ?"orange" :"lightblue"};});<Panel$alert>Hello</Panel>;// Do you prefer hooks?import{useStyletron}from"styletron-react";const[css]=useStyletron();<aclassName={css({color:"red"})}href="/foo">  Hello</a>;

Getting Started

Checkthe documentation to setup Styletron with Next.js, Gatsby or plain React/JS apps.

Looking for v3.x docs? |v3.x to v4.x migration guide

Design principles

  1. Component-oriented
    • Stateless, single-element styled components as base styling primitive
    • Prop interfaces for conditional/dynamic styling
  2. Embrace typed JavaScript
    • Composition of styles via (typed) JavaScript objects
    • No extra tooling (e.g. Webpack loaders, Babel plugins, etc.)
  3. Portability and flexibility
    • Portability of styled components across different rendering engines (e.g. atomic CSS)

Seedocs/design.md for more details.

Packages


[8]ページ先頭

©2009-2025 Movatter.jp