React Css Themr не работает

Question

Моя цель состоит в том, чтобы иметь одну главную тему для приложения и загружать пользовательские стили поставщика, если она установлена.

Я слежу за учебником по реагированию-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; 
} 

Это Безразлично» Кажется, я даю какие-то классы или какой-нибудь стиль. Любые идеи, пожалуйста?

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

Сам компонент будет иметь это по умолчанию тематизации и затем будут обернуты с themr 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