How to make a component's styles overridable

In practice, many consumers need to override styles from the UI Components. For example, you might want to provide your own stylesheet for the Button. Components need to provide a way of doing such overriding. This is how.

In your component:

1. Import your styles as defaultStyles:

import defaultStyles from './styles.scss'

2. Import the bindable version of the classname utility:

import classNameBind from 'classname/bind'

3. Add a styles prop to your component:

YourComponent.propTypes = {
  styles: PropTypes.object
}

4. In the render, get bound class names by spreading both defaultStyles and styles:

function YourComponents (props) {
  const { styles } = props
  const classNames = classNamesBind({ ...defaultStyles, ...styles })

  /* ... */
}

5. Profit