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

@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`}>

{children}

</button>


// ButtonGroup js

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

{children}

</div>


// Using ButtonGroup + Button…

render() {
 return (

<ButtonGroup>

<Button>one</Button>

<Button>two</Button>

</ButtonGroup>

)
}


// ButtonGroup.css

.button-group {

:global {

.button {

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

}

}

}

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.