React Css 它们不工作

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

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

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

React Css 它们不工作

React Css Themr not working

javascript

css

themes

sass

reactjs