React simple styling
Simple Vue-like library to create scoped styles for your React components!
Installation
npm i react-simple-styling
or
yarn add react-simple-styling
Usage
import
Get a style wrapper
const style = css` .message { width: 300px; margin: 0 auto; color: red; }`;
and apply the css with it
const App = ;
Consuming className
No more manual extracting and applying className from props! styleable wrapper allows a component to consume className automatically:
const Card = <div className="card-bg rounded p-2"> children </div>; Card;
And the code below
const App = <div> <Card className="test"> Hello world! </Card> </div>;
will be transformed into this:
Hello world!
Theming
Now the library supports string interpolation. You can use it to manage themes easily.
const style = css` .border { border: 1px solid }`;
CSS syntax highlighting
To bring syntax highlighting and autocomplete checkout the extenstions for styled-jsx which work with my module as well.
https://github.com/zeit/styled-jsx#syntax-highlighting
Thanks to
- Joshua Robinson. Most of the code for css scoping i took from his style-it module.