Everything is private to it's local context with no global side effects. But our library component allows it's parent to overide styles (without defining a million props).

library.css

.root {
  width: 200px;
  height: 200px;
  background-color: red;
}

.title {
  font-size: 20px;
}

libraryWrapper.css

/* here you just need to know what classes the library uses */

.root {
  width: 500px;
  height: auto;
  background-color: green;
}

output.css

/* for the lib style */

.library__root__3wefoi2 {
  width: 200px;
  height: 200px;
  background-color: red;
}

.library__title__ewflnw3 {
  font-size: 20px;
}

/* for the wrapping style */

.wrapping__root__wk3jn2o {
  width: 500px;
  height: auto;
  background-color: green;
}

output.html

<!-- and the output markup, if I use the wrapping style -->

<div className='wrapping__root__wk3jn2o'>
  <h2 className='library__title__ewflnw3'>Hello contrived example</h2>
</div>

SomeLibraryComponent.jsx

var style = require('library.css')

if(typeof this.props.style !== 'undefined') {
  // style is just an object (if using webpack/postcss) so we can use js to overide class keys
  // (arbitrary merge function)
  merge(style, this.props.style)
}

render() {
  return ( 
    <div className={style.root}>
      <h2 className={style.title}>Hello contrived example</h2>
    </div>
  )
}

WrappingComponent.jsx

// The wrapping component

var SomeLibraryComponent = require('SomeLibraryComponent')
var overidingStyle = require('libraryWrapper.css')

render() {
  return (
    <SomeLibraryComponent style={overidingStyle}
  )
}