[HOC suggestion] withStyles

[petejodo]

withStyles is probably a misnomer since it implies the style prop for the basic components. Regardless, I find having to remember CSS classes and SCSS variables to be annoying in large codebases. I feel like it can lead to bloated CSS due to multiple people creating 2 different classes to style similar things.

I was thinking you can abstract the use of CSS into HOCs that just extend className but would also let you build onto it. For a contrived example...

const colorPrimary = withStyles('some-class');
const colorPrimaryButton = withStyles(
  colorPrimary,
  'another-class'
);

const PrimaryComponent = colorPrimary(SomeComponent);
const PrimaryButton = colorPrimaryButton(DOM.button);
const PrimaryLink = colorPrimaryButton(DOM.link)

I wrote this gist originally with just withProps but then realized that if you want to create a hierarchy, then an allocation would be made for each call to withProps so I wrote a somewhat naive implementation of withStyles there. I would like to hear others' opinions on the concept and the implementation.

[istarkov]

There are many different styles libraries available over the github. For example now I use css-modules with themr library. Isn't it will be better to use all that fantastic enhancers of such libraries to solve styling problem?

[petejodo]

I have not heard of themr to be honest, will check it out

[kevinSuttle]

The problem is that it seems you're forced to write a wrapper if you want to tackle this yourself. http://stackoverflow.com/questions/40271866/inject-new-inline-styles-to-a-react-hoc-product

[therealparmesh]

+1 for react-css-themr

[wuct]

I am going to close this issue because it's apparently not in the scope of recompose.