react-interface

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.