style()

style() creates styled components with support for dynamic style templates.


const Button = nano.style('button', {
  display: 'inline-block',
  borderRadius: '3px',
  padding: '0.5rem 0',
  margin: '0.5rem 1rem',
  width: '11rem',
  color: 'white',
  border: '2px solid white',
}, (props) => ({
  background: props.primary ? 'blue' : 'grey',
  fontSize: props.small ? '12px' : '16px',
}));
 
<Button primary>Click me!</Button>

Signature


style(type, css, dynamicCss?, name?)

Parameter	Description
`type`	String tag name or component to style
`css`	Static CSS-like object
`dynamicCss`	Optional function `(props) => cssObject` for dynamic styles
`name`	Optional semantic component name

Filtering Props

Styled components pass all props through. To prevent custom props from reaching the DOM, you can whitelist or blacklist:

Blacklist approach:


const ButtonBase = ({ primary, small, ...rest }) => <button {...rest} />;
 
const Button = nano.style(ButtonBase, {
  display: 'inline-block',
}, (props) => ({
  background: props.primary ? 'blue' : 'grey',
}));

Installation

Requires cache, rule, and jsx addons:


import { addon as addonCache } from 'nano-css/addon/cache';
import { addon as addonRule } from 'nano-css/addon/rule';
import { addon as addonJsx } from 'nano-css/addon/jsx';
import { addon as addonStyle } from 'nano-css/addon/style';
 
addonCache(nano);
addonRule(nano);
addonJsx(nano);
addonStyle(nano);