反应Css Themr不工作

Question

我的目标是有一个主题的应用程序和加载自定义供应商样式（如果设置）。

我一直在按照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; 
} 

那并不是” t似乎给我任何类或任何样式。请有任何想法吗？

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