Themr with pure functions

[Michael Havard]

Does anyone have an example of using themr with pure function components vs. classes and how to provide a default theme and then override that theme from a parent container? I've searched through the readmes and issue log and I'm not finding anything solid as an example for this case.

Here's my thought on how it should work

/* defaultTheme.module.scss */
.button {
    background-color: blue;
    color: white;
}

/* Button.js */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { themr } from 'react-css-themr';
import defaultTheme from './defaultTheme.module.scss';

const Button = ({ theme }) => {
    const classes = classNames({ [theme.button]: true });
    return <button className={ classes }>Button</button>;
};

Button.propTypes = {
    theme: PropTypes.any
};

export default themr('Button', defaultTheme)(Button);

/* parentTheme.module.scss */
.button {
    background-color: white;
    color: blue;
}

/* ParentContainer.js */
import React from 'react';
import { render } from 'react-dom';
import parentTheme from './parentTheme.module.scss';
import Button from './Button';

render(
    <Button theme={ parentTheme } />,
    document.getElementById('app');
);

Default theme seems to work fine and the button component displays the default styles no problem. However, nothing happens when the parent passes a theme down.

[Oscar Barrett]

I've done it without using classnames, e.g.

const Button = ({ theme }) => (
  <button className={theme.button}>Button</button>
);