javascript - React Css Themr 不工作

Question

我的目标是为应用程序设置一个主主题并加载自定义 vendor 样式(如果已设置)。

我一直在关注 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;
}

这似乎没有给我任何类或任何样式。有什么想法吗？

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