styletron alternatives and similar libraries
Based on the "PostCSS" category.
Alternatively, view styletron alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
-
-
-
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing! -
-
-
-
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient. -
-
-
-
-
-
-
jTools - Javascript web components
jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms. -
React Inline
DISCONTINUED. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
-
-
-
-
-
File Management with Preview
DISCONTINUED. A file management system built with Vue.js and TypeScript that allows for single and multiple file uploading with a preview feature -
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
Nutrient – The #1 PDF SDK Library, trusted by 10K+ developers
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of styletron or a related project?
README
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
import { styled } from "styletron-react";
// Create a styled component by passing an element name and a style object
const RedAnchor = styled("a", { color: "red" });
<RedAnchor href="/foo">Hello</RedAnchor>;
// Or pass a function that takes props and returns a style object
const Panel = 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();
<a className={css({ color: "red" })} href="/foo">
Hello
</a>;
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](docs/v3-migration-guide.md)
Design principles
- 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)
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)