Reaction Css Themr funktioniert nicht

Question

Mein Ziel ist es, ein Hauptthema für die App zu haben und benutzerdefinierte Hersteller Stile zu laden, wenn einer festgelegt ist.

Ich habe das Tutorial von react-css-themr verfolgt und ich kann es nicht zum Laufen bringen. Das minimalistische Beispiel, das ich kommen könnte mit, ist dies:

mein Modul:

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; 
} 

Das doesn‘ Es scheint, als ob ich meinen Unterricht oder irgendein Styling gebe. Irgendwelche Ideen bitte?

Answer 1

Die Art, wie ich Komponenten verdrahtete, war falsch. Der Weg dazu ist wie folgt:

In der Root-Komponente müssen Sie Ihren Themenanbieter und Thema angehängt haben. Dieses Thema überschreibt alle untergeordneten Komponenten.

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')); 

Die Komponente selbst wird es standardmäßig Thematisierung und dann mit themr API eingewickelt werden, um die Standardeinstellungen des überschrieben.

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); 

Ich habe eine GitHub Repo zeigt, wie diese verwenden:

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