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

import { css, styleable } from 'react-simple-styling'

Get a style wrapper

const style = css`
  .message {
    width: 300px;
    margin: 0 auto;
    color: red;
  }
`;

and apply the css with it

const App = ()=> style(
  <div>
    <div className="message">
      Hello world!
    </div>
  </div>
);

Consuming className

No more manual extracting and applying className from props! styleable wrapper allows a component to consume className automatically:

const Card = ({children})=> (
  <div className="card-bg rounded p-2">
    {children}
  </div>
);

export default styleable(Card);

And the code below

const App = ()=> (
  <div>
    <Card className="test">
      Hello world!
    </Card>
  </div>
);

will be transformed into this:

<div>
  <div class="card-bg rounded p-2 test">
    Hello world!
  </div>
</div>

Theming

Now the library supports string interpolation. You can use it to manage themes easily.

const style = css`
  .border {
    border: 1px solid ${theme.accent}
  }
`;

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.