Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to Merge Themes #9

Open
raybooysen opened this issue Jul 3, 2017 · 2 comments
Open

How to Merge Themes #9

raybooysen opened this issue Jul 3, 2017 · 2 comments

Comments

@raybooysen
Copy link

I posted this on StackOverflow, unsure on the best forum for this:

If I'm using react-themeable, often I want a component like:

const styles = require('./component.css');

class Component extends React.Component {
  render() {
       let customTheme = this.props.theme;
       return <div className={styles.container}>Hi</div>;
  }
}

If I have a theme I pass into the component via props, is there a way with react-themeable where I can merge the theme from the css file AND the theme from the props.

This mean consumers can override bits of the theme they want.

@erosenberg
Copy link

+1

@bestguy
Copy link

bestguy commented Mar 18, 2019

Hi @raybooysen, old question but I ran into this as well and found a workaround:

import styles from './component.css';
import classnames from 'classnames';

class Component extends React.Component {
  render() {
       const theme = this.props.theme;
       const { className, style } = theme(1, 'container');
       const classNames = classnames(styles.container, className);

       return <div className={classNames}>Hi</div>;
  }
}

I used classnames library for convenience, but you could do same with string concatenation, etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants