Inject parent class into children about react-css-themr HOT 5 CLOSED

Nailed it! I've been thinking about doing the exact same thing you proposed. It would be backwards compatible and solves the issue. I had this very issue with Dropdown Component in react toolbox. It uses an Input under the covers and defines the same classes for label, error, etc. This would make this lib way better than it is right now since this is the most important caveat I see by now.

Do you want to PR? It shouldn't be difficult

from react-css-themr.

I'm still thinking about this... What about namespacing with an attribute instead of mapping? Less flexible but cleaner API. For example:

/* Section.css */
.content {
    & .buttonContent{
      color: red;
    }
}

And assuming that your Button has a classname API with a content node:

import React from 'react';
import Button from './ThemedButton.js';
import theme from './section.css';

const Section = () => (
  <section className={theme.content}>
    <Button theme={theme} namespace="button" />
  </section>
);

We can even support this namespace setup from the themr factory function (even falling back to the component identifier)so a button can have by default a namespace that could be enabled using a simple prop namespace:

const ThemedButton = themr('button', style)(Button);
// Or... themr('ContextIdButton', style, { namespace: 'button' })(Button);
<ThemeButton theme={theme} namespaced />

Or using recompose under the hood as you do now. Thoughts?

from react-css-themr.

Namespacing looks good. Not so obvious as mapping but you don't have to list all classes manually. I like to use namespace as a second prop with the theme as you can see the namespace's name at the same place where you use it (in your parent component, not button itself.)

from react-css-themr.

Great!

from react-css-themr.

Here how I see it. namespace and theme props should be used together. I don't know if it makes sense to add support of the namespace with default/context styles.

from react-css-themr.