Adam Adam - 1 month ago 21
CSS Question

React Css Themr not working

My target is to have one main theme for the app and load custom vendor styles if one is set.

I have been following the tutorial of react-css-themr and I can't get it to work. The minimalistic example I could come up with is this:

my module:

import {render} from 'react-dom'
import React from 'react';
import {Item} from './components/presentational/Item';
import {ThemeProvider} from 'react-css-themr';
import style from './theme/ItemDefault.scss';

const contextTheme = {
Item: require('./theme/ItemVendor.scss'),
};

const About = () => {
return (
<ThemeProvider theme={contextTheme}>
<Item theme={style} className={style.red}/>
</ThemeProvider>
)
};


ItemDefault.scss:

.button{
color:deeppink;
}


ItemVendor.scss:

.button{
color:orangered;
}


That doesn't seem to give my any classes or any styling. Any ideas please?

Answer

The way I was wiring components was incorrect. The way to do this is as follows:

In the root component you need to have your theme provider and theme attached to it. This theme will override any child component theming.

import {render} from 'react-dom'
import React from 'react';
import {ThemeProvider} from 'react-css-themr';
import inlineCss from './page.scss';
import {Item} from './components/Item';

const contextTheme = {
    Item: require('./theme/ItemVendor.scss'),
};

render((
    <ThemeProvider theme={contextTheme}>
        <Item />
    </ThemeProvider>
), document.getElementById('app'));

The component itself will have it's default theming and then will be wrapped with themr API to overwrite the it's default settings.

import {render} from 'react-dom'
import React from 'react';
import { themr } from 'react-css-themr';
import defaultTheme from './Item.scss';

const DefaultItem = ({theme}) => {
    return (
        <div className={theme.button} >
          Example item
        </div>
    )
};

export const Item = themr('Item', defaultTheme)(DefaultItem);

I put together a github repo showing how to use this:

https://github.com/adamgajzlerowicz/react-css-themr