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

Good article, thank you for not being opinionated!

This is how I would solve that problem:

  1. Differentiate between layout (positioning) of the button and it’s inner styling. If you need the margins of the button inside of the button group, you can:
    - Wrap that button into a div and define margins on it.
    - A layout like flex on the button group can position it’s children.
    - You can add a class name to the button and define a margin through it.
  2. A whole different problem is the inner styling of the button within button group. This can be generally called “Theming”. A button needs to have an interface for defining a theme via it’s props. A button needs to accept a theme and apply it over it’s default styles.

This is my take on defining a theme object schema which is universal for all frameworks.

In JSS there is a jss-nested plugin, which allows to write any kinds of selectors and so it allows to define a margin on a child component from outside. This is ok as long as it doesn’t modify inner properties of that button.