React Css Themr not working

Question

私の目標は、アプリのメインテーマを1つ設定し、それが設定されている場合はカスタムのベンダースタイルを読み込むことです。

私はreact-css-themrのチュートリアルに従っています。私はそれを動作させることができません。

私のモジュール：

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

」doesnの私が思い付くことができ、最小限の例がこれです私のクラスやスタイルを与えるように見える。どんなアイデアですか？

Answer 1

コンポーネントの配線方法が正しくありませんでした。これを行う方法は次のとおりです。

ルートコンポーネントでは、テーマプロバイダとテーマを添付する必要があります。このテーマは、子コンポーネントテーマを上書きします。

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

コンポーネント自体にはデフォルトのテーマが設定されており、デフォルトの設定を上書きするためにAPIがラップされます。

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

私はこれを使用する方法を示しgithubのレポをまとめ：

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