React ScopeStyle

component.js

import React      from 'react'
import ScopeStyle from 'react-scopestyle'

let css = "div { color:pink; }"

export default class MyScopeStyleComponent extends React.Component {
    render() {
        return (
            <ScopeStyle style={css}>
                <div>yolo</div>
            </ScopeStyle>
        )
    }
}

react-scopestyle.js

import React from 'react'
import uid   from 'uid'

export default class ScopeStyle extends React.Component {
    constructor(props) {
        super(props)
        this.state = { uid : uid() }
    }
    render() {
        return (
            <span className={this.state.uid}>
                <style dangerouslySetInnerHTML={{__html: this.scopeStyle()}} />
                {this.props.children}
            </span>
        )
    }
    scopeStyle() {
        // magically scope under .uid
        return this.props.style
    }
}

Will scope style for component under .uid so div styling only applies to the yolo div. However, constantly adding and removing style tags has some performance issues. Not too bad, but still...