Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rtsao/styletron
:zap: Toolkit for component-oriented styling
https://github.com/rtsao/styletron
atomic-css css css-in-js cssinjs styletron
Last synced: 8 days ago
JSON representation
:zap: Toolkit for component-oriented styling
- Host: GitHub
- URL: https://github.com/rtsao/styletron
- Owner: styletron
- License: mit
- Created: 2016-04-01T00:00:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-22T12:25:22.000Z (about 1 year ago)
- Last Synced: 2024-12-10T11:06:16.162Z (13 days ago)
- Topics: atomic-css, css, css-in-js, cssinjs, styletron
- Language: TypeScript
- Homepage: https://www.styletron.org
- Size: 2.48 MB
- Stars: 3,319
- Watchers: 37
- Forks: 98
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-css-in-js - styletron - react](https://github.com/rtsao/styletron#using-styletron-with-react) | (库)
- awesome-functional-css - Styletron - in-js ➡️ atomic CSS) (Uncategorized / Uncategorized)
README
# [![Styletron logo](https://cdn.rawgit.com/styletron/styletron/logo/logo.svg "Styletron")](https://github.com/styletron/styletron)
![test workflow](https://github.com/styletron/styletron/actions/workflows/test.yml/badge.svg)
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](https://www.styletron.org)**!
## Usage with React
```js
import { styled } from "styletron-react";// Create a styled component by passing an element name and a style object
const RedAnchor = styled("a", { color: "red" });
Hello;// Or pass a function that takes props and returns a style object
const Panel = styled("div", props => {
return { backgroundColor: props.$alert ? "orange" : "lightblue" };
});
Hello;// Do you prefer hooks?
import { useStyletron } from "styletron-react";
const [css] = useStyletron();
Hello
;
```## Getting Started
Check [the documentation](https://www.styletron.org/getting-started/) to setup Styletron with Next.js, Gatsby or plain React/JS apps.
[_Looking for v3.x docs?_](https://www.styletron.org/v3/) | [_v3.x to v4.x migration guide_](docs/v3-migration-guide.md)
## 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](docs/design.md) for more details.
## Packages
- [`styletron-engine-atomic`](packages/styletron-engine-atomic)
- [`styletron-react`](packages/styletron-react)
- [`styletron-standard`](packages/styletron-standard)