An opinionated way to style React components.
De Stijl is a very thin layer on top of Glamor to provide a preferred way of working with css in React. It scopes de-duplicates and prefixes css, and allows hovers, media queries and psuedo selectors.
yarn add --dev destijlimport { Style, Styling } from "destijl";
Write inline styles using the Style function. You can optionally add hovers, media queries and psuedo css selectors. Then, use them in a React component. Every html tag now accepts a css property that you can use to set the style directly on any html element.
const style = Style({ border: "1px solid red" });
style.hover({ border: "1px solid green" });
const tree = <div css={style} />;Use the Styling tag in your html head, which generates the css for all the children.
const Template = props => {
return (
<html>
<head>
<Styling body={props.children} />
</head>
<body>{props.children}</body>
</html>
);
};- It provide a very natural way for designers to write css.
- It allows for hovers, media queries and psuedo selectors, unlike inline css.
- It relies on TypeScript types to assist with writing css.
- By relying on Glamor, it scopes, de-duplicates and prefixes css, avoiding many common errors.
- Stijl monkey patches
React.createElementto allow each html tag to use a conveniencecssproperty.