Styletron

Toolkit for component-oriented styling

CSS in JSAtomic CSS
styletron/styletronwww.styletron.orgstyletron-engine-atomic

README

Styletron logo

[![build status][build-badge]][build-href]

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 at styletron.org!

Usage with React


  1. ``` js
  2. import { styled } from "styletron-react";

  4. // Create a styled component by passing an element name and a style object
  5. const RedAnchor = styled("a", { color: "red" });
  6. <RedAnchor href="/foo">Hello</RedAnchor>;

  8. // Or pass a function that takes props and returns a style object
  9. const Panel = styled("div", props => {
  10.   return { backgroundColor: props.$alert ? "orange" : "lightblue" };
  11. });
  12. <Panel $alert>Hello</Panel>;

  14. // Do you prefer hooks?
  15. import { useStyletron } from "styletron-react";
  16. const [css] = useStyletron();
  17. <a className={css({ color: "red" })} href="/foo">
  18.   Hello
  19. </a>;
  20. ```

Getting Started


Check the 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)

See docs/design.md for more details.

Packages


- [styletron-engine-atomic](packages/styletron-engine-atomic)
- [styletron-react](packages/styletron-react)
- [styletron-standard](packages/styletron-standard)

[build-badge]: https://travis-ci.org/styletron/styletron.svg?branch=master
[build-href]: https://travis-ci.org/styletron/styletron