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 repo，展示如何使用它：

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

反应Css Themr不工作

1 个答案: