- Notifications
You must be signed in to change notification settings - Fork98
⚡ Toolkit for component-oriented styling
License
NotificationsYou must be signed in to change notification settings
styletron/styletron
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
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!
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>;
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
- Component-oriented
- Stateless, single-element styled components as base styling primitive
- Prop interfaces for conditional/dynamic styling
- Embrace typed JavaScript
- Composition of styles via (typed) JavaScript objects
- No extra tooling (e.g. Webpack loaders, Babel plugins, etc.)
- Portability and flexibility
- Portability of styled components across different rendering engines (e.g. atomic CSS)
Seedocs/design.md for more details.
About
⚡ Toolkit for component-oriented styling
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published