Repository files navigation

Table of Contents

• Motivation
• Installation & Usage
• Base components
  • DOM components
  • Composite components
• Variants
  • Named variants
  • JavaScript expressions
• Customizing CSS loading
  • CSS extraction
  • Using with SASS/SCSS/LESS/Stylus/...
  • Using with PostCSS (including autoprefixer)

Define React presentational components with CSS (or even SASS or Less if youlike).

The implementation is based onCSS modules. In fact React CSS Components isjust a thin API on top of CSS modules.

NOTE: The current implementation is based on Webpack but everything is readyto be ported onto other build systems (generic API is here just not yetdocumented). Raise an issue or better submit a PR if you have some ideas.

Install from npm:

% npm install react-css-components style-loader css-loader

Configure inwebpack.config.js:

module.exports={  ...module:{loaders:[{test:/\.react.css$/,loader:'react-css-components',}]}...}

Now you can author React components inStyles.react.css:

Label {color: red;}Label:hover {color: white;}

And consume them like regular React components:

import{Label}from'./styles.react.css'<Label/>// => <div>...</div>

By default React CSS Components produces styled<div /> components. You canchange that by definingbase: property:

FancyButton {base: button;color: red;}

Now<FancyButton /> renders into<button />:

import{FancyButton}from'./styles.react.css'<FancyButton/>// => <button>...</button>

In fact any React component which acceptsclassName props can be used as abase. That means that React CSS Components can be used as theming tool for anyUI library.

Example:

DangerButton {base: react-ui-library/components/Button;color: red;}

Variants is a mechanism which allows defining component styling variants.

You can define additional styling variants for your components:

Label {color: red;}Label:emphasis {font-weight: bold;}

They are compiled as CSS classes which then can be controlled from JS viavariant prop:

<Labelvariant={{emphasis:true}}/>// sets both classes with `color` and `font-weight`

You can define variants which are conditionally applied if JS expression againstprops evaluates to a truthy value.

Example:

Label {color: red;}Label:prop(mode=="emphasis") {font-weight: bold;}

Note that any free variable references a member ofprops, thus in JSmodebecomesprops.mode in the example above.

They are compiled as CSS classes as well. JS expressions withinprop(..) areused to determine if corresponding CSS classes should be applied to DOM:

<Labelmode="emphasis"/>// sets both classes with `color` and `font-weight`

By default React CSS components loads CSS usingstyle-loader!css-loader loaderchain. That could be configured differently usingloadCSS loader parameter.

This could be used to enable features such asCSS extraction, processingstylesheets withPostCSS/Autoprefixer or even authoring stylesheets withSASS orLESS.

See thecomplete example whichconfiguresextract-text-webpack-pluginto extract stylesheets to a separate chunk.

See thecomplete example whichuses SASS/SCSS to create React components.

See thecomplete example whichconfigures PostCSS with Autoprefixer to automatically add vendor prefixes tostylesheets.