> "Styling is still "unsolved" with react IMO."
How about this simple way to decouple styling from components using CSS Modules (no inline styles needed):
components/
|__FooComp/
|__FooComp.jsx
|__FooComp.css
css/
|__components/
|__FooComp/
|__styleOne.css
|__styleTwo.css
|...
FooComp.css contains only the very basic formatting for the component which is needed for displaying it correctly out of the box. No styling/theming, just some raw universal formatting/structuring (if necessary at all). FooComp.jsx loads and applies FooComp.css internally
using CSS Modules like this:
Inside FooComp.jsx:
import defaultClasses from './FooComp.css';
const FooComp = props => (
);
export default FooComp;
styleOne.css and styleTwo.css contain different (external) styles for FooComp. Now if you need to use FooComp with an external style you load both FooComp.jsx and the external style (again, using CSS Modules to load and apply the styles):
import FooComp from 'components/FooComp/FooComp';
import FooComp$styleOne from 'css/components/FooComp/styleOne.css';
and put them together like this:
This way you can easily use the same component with different styles.
> "CSS modules are TOO encapsulated which makes global styles and themes a royal pain"
You can still use:
@import '../someGlobals.css';
or:
.someClass {
composes: anotherClass from "./someFile.css";
color: green;
}
or:
.someClass {
@apply --anotherClass;
color: green;
}
or:
.someClass {
background: var(--brandPrimary);
color: green;
}
or ...
There are plenty of options especially with PostCSS.
