The Problem with CSS-In-JS, circa Mid-2016
Jimmy Jia

@taion I have a solution for “ButtonGroup” that works OK enough for me so far.

When making a component (Button in this case), I give it both css module style names as well as actual plain class names. This lets me have some amount of improved styling control from nested children (simplified example; i normally use react-css-modules):

// Button js

// styles = css module styles map

<button className={`${styles.btnWrapper} button`}>



// ButtonGroup js

<div className={`${styles.btnGroupWrapper} button-group`}>



// Using ButtonGroup + Button…

render() {
 return (






// ButtonGroup.css

.button-group {

:global {

.button {

/* now you can add styles to .button from within .button-group */