CSS via Components

A single React component to inject CSS with ease.

It works with SSR (even using React 16's renderToNodeStream) and client-side rendering out-of-the-box.

TravisCI npm downloads dependencies

Support Me

If you're using Robin Frischmann's packages, please consider supporting his Open Source Work on Patreon.

Installation

sh
yarn

yarn add react-css-component
npm

npm i --save react-css-component


> Caution: It requires

react and prop-types

 to be present.
Why?

This package was created as a possible solution to a question by Kent C. Dodds.

Creating resuable React components in general is pretty easy, but adding styling is not. The simplest way is to just use inline style, which works pretty well for many basic components. Yet, it is very limited. Neither do we have have pseudo classes nor do we have media queries.

So, at some point, we need actual CSS. We could include a CSS file, but that would require an additional build step e.g. using Webpack in combination with its css-loader. While this would work, it's not very compelling to enforce a certain build tool, just to use a single component.

Alright, how about CSS in JS? Using plain JavaScript to style the component sounds great, as the component is written in JavaScript anyways. But, most CSS in JS solutions are way to big to depend on. They're built for applications, not for independent reusable components. Yet, we can still benefit from writing our CSS in JavaScript. This package is the attempt to provide the smallest universal solution for inlining CSS in JavaScript possible.
How?

Depending on whether universal rendering (server-side rendering with client-side rehydration) or client-side only rendering is used, the implementation uses a different logic.
$3

Server Rendering: The UniversalStyle component renders a primitive style DOM element that uses

dangerouslySetInnerHTML

 to inject a CSS string.

Client Rehydration: At first, the UniversalStyle component just gets rehydrated to match the server-side markup. But, as soon as it is about to unmount, the style element is copied to the

document.head

 once. This will ensure it's existence just in case any other component using it's CSS is still visible.
#### Caveat
During server-side rendering, the UniversalStyle component is not able to track it's own occurence, which may result in duplicate style elements. This won't break anything, but also is not optimal. To ensure that each UniversalStyle instance is only rendered once, we need an unique cache on every render. This is achieved by passing a simple cache via React's context feature. Check the StyleCacheProvider component for more information.
$3

If we only render on the client-side anyways, we can skip that complex flow and just use the ClientStyle.

It simply injects a style element into the

document.head

 on instantiation and tracks its occurence using a global cache.
> Note: The ClientStyle component won't throw with server-side rendering, but it simply doesn't render styles.
Style

Both

UniversalStyle and ClientStyle

 share the exact same component API.

This component is the core component and is used to inject the CSS.
$3
| Parameter | Type | Description |
| --- | --- | --- |
| css | (string) | A CSS string that is rendered |
$3

javascript
// universal rendering
import { UniversalStyle as Style } from 'react-css-component'

// client-only rendering import { ClientStyle as Style } from 'react-css-component'`

`$3`

javascript
const css =

.button {
background-color: darkblue;
padding: 20px 10px;
font-size: 16px;
color: white
}

.button:hover {
background-color: blue
}

// return an array to colocate style and the button const Button = () => [