Package Exports

react-interface
react-interface/es/components
react-interface/es/themes/base
react-interface/es/themes/light

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-interface) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-interface

Quickly build interfaces that look great with your brand colors.

Styling Components

// global theme
// good for DRYing up components, global defaults
'button.color' : colors.gray[4]
'button.color': darken(1/20, props.theme['button.background'])

// composition
// powerful way to add custom functionality built on top of react-interface
const CustomButton = Button.extend`
  color: ${props => darken(1/20, props.theme['button.color'])};
`

// component props
// convenient way to override props in specific cases
<Button color="gray.4">
<Button color="button">
<Button color="#fff">
<Button color={darken}>

Note that properties unrelated to color (radius, spacing, etc) are better served as props to the component or done through composition/defaults. Color properties are often better configured in the theme to reduce boilerplate and improve consistency. This is particularly true if you plan to offer multiple themes, such as a dark and light option.