Toolkit for component-oriented styling
MIT License
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!
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>;
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
See docs/design.md for more details.