Good article, thank you for not being opinionated!
This is how I would solve that problem:
- 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.
- 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.