Feature Request: Provide `themeName` prop for components wrapped by `themr`

Having to deal with the style object generated by module bundlers is typically unfriendly, for all the reasons outlined in react-css-modules#whats-the-problem.

It’d be nice if styling was done through a similar approach to what react-css-modules provides by way of a themeName prop that gets inspected by the HOC and is automatically injected into that children component’s classNames. Having a similar API also provides more hints to the user as to which one they should be wrapping their components in: if its styles are meant to be overriden or injected, use themr, otherwise use react-css-modules. However, it’s a little bit awkward in that themr could almost be seen as a superset of react-css-modules, but I think there’s something to be gained by limiting the themeability of a component through react-css-modules and I see at least one clear use case where I’d use both together – inline child components:

import React from 'react';
import CSSModules from 'react-css-modules';
import { themr } from 'react-css-themr';
import List from './List';
import theme from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate = CSSModules((name) => (
            <li styleName='item-template'>{name}</li>;
        ), this.props.theme); // or even subset of theme (ie. { 'item-template': this.props.theme['item-template'] })

        return <List themeName="list" itemTemplate={itemTemplate} />;
    }
}

export default themr("ListComponent", theme)(CustomList);
// As an aside, it'd also be nice to expose a normal function operator,
// see https://github.com/gajus/react-css-modules/blob/master/src/index.js#L47

Thoughts? Also pulling in @gajus since he might have some thoughts to share.

I’ll probably start working on this soon since I’m finally getting around to using this (awesome work btw, @javivelasco, a lot of this makes a lot of sense and solidified a lot of the ideas I had wanted to implement myself!) but the similarities to react-css-modules means I’ll likely pull a lot from that repo or generalize it into some generic style utils.

[javivelasco]

Hi guys! I couldn’t read the whole thread yet but I wanted to drop a quick comment before going to sleep. First of all, congrats @gajus for the project, I looked at it long ago and it’s a great work, I’m not familiar with the current state though. Thanks @SohKai for your kind words! 😃

I’ve written this small module to be used with react-toolbox. It’s quite difficult to customize components so what I wanted to do at first was just to provide a way to add classes to the component following an API.

For example, imagine a menu with a pointer that can be positioned in multiple places depending on some props. Typically the pointer will be done with pseudoelements and, in case you want to customize the background, for that specific class what you’d do is to change the border-color. Just one property. That’s way instead of provide new styles for the menu, you just add classes using the theme property. The HOC appends them for you. I don’t know if nowadays it’s possible to do this in react-css-modules, but if it’s I couldn’t figure out before writing this.

Another example is to provide the whole theme in a single place. In react toolbox you should be able to import a Raw component and I wanted to give the ability to customize a full application without changing toolbox imports. This means you’d be importing a RAW toolbox component and then providing the theme somewhere else. The best way to do this without spreading props through the tree was by using contexts. So I came up with this idea of setting an object with the relation between component ids and theme objects.

More or less those are the ideas behind. If all of this can be done I’d happily move to react-css-modules 😃 Tomorrow I’ll read better the messages and try to be more accurate in my answers. Thanks for your time checking on this lib!

[javivelasco]

Ok! If there is something we can do to improve integration just reopen. It looks like the lib is gaining popularity and I’d love to make it as good as possible 😃 Thanks and sorry again for my late response @sohkai !!