Component

The component addon provides a Component base class for creating styled React class components.


const { Component } = nano;
 
class Button extends Component {
  static css = {
    display: 'inline-block',
    borderRadius: '3px',
    padding: '0.5rem 0',
    margin: '0.5rem 1rem',
    width: '11rem',
    background: 'transparent',
    color: 'white',
    border: '2px solid white',
  };
 
  render() {
    return <button>Click me!</button>;
  }
}

Dynamic Styles

Use a css() method for styles that depend on props:


class Button extends Component {
  css() {
    return {
      background: this.props.primary ? 'blue' : 'grey',
    };
  }
 
  render() {
    return <button>{this.props.children}</button>;
  }
}

Installation

Requires cache and rule addons:


import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonComponent } from 'nano-css/addon/component';
 
addonCache(nano);
addonRule(nano);
addonComponent(nano);