React-Toolbox:如何应用主题 [英] React-Toolbox: How to apply theme

问题描述

我正在使用react工具箱，在我的webpack配置中(我仅发布了配置的重要部分):

I'm using react toolbox and in my webpack configuration i have (i post just the significant part of the configuration):

loaders: [
..... 
ExtractTextPlugin.extract('style',
                'css?sourceMap&modules&importLoaders=1&localIdentName=' +
                '[name]__[local]___[hash:base64:5]!postcss!sass') }
        ]
postcss: [autoprefixer],
    sassLoader: {
      data: '@import "' + path.resolve(__dirname, 'app/theme/_config.scss') + '";'
    }

在app/theme/_config.scss中我定义了:

@import "~react-toolbox/lib/colors";
@import "~react-toolbox/lib/globals";
@import "~react-toolbox/lib/mixins";

$color-primary: $palette-orange-500;
$color-primary-dark: $palette-orange-700;

现在，任何奇怪的地方，我的颜色都正确应用了.

现在，我想创建一个自定义的Card组件，并且我已经这样定义了它(仅用于测试主题):

Now, i want to create a custom Card component, and i have defined it like this (just for test the theme):

import theme from './style.scss';
const CardStatus = ({ children, ...other}) => (
    <Card {...other} theme={theme}>
        <CardTitle
            title="A title"
            subtitle="a subtitle"
            theme={theme}
        />
    </Card>
);

CardStatus.propTypes = {
    children: PropTypes.node
};

导出默认CardStatus；

export default CardStatus;

在style.scss中，我有:

In style.scss i have:

.title {
  color: yellow;
}

我的应用程序编译没有错误，但是黄色不适用于我的CardTitle:

My application compile without errors, but the yellow color are not applied to my CardTitle:

我尝试过:

1. theme={theme}
2. theme={theme.title}

1. theme={theme}
2. theme={theme.title}

但是没有什么...颜色不起作用.

But nothing... color not works.

我做错了什么?

推荐答案

在为组件设置主题时，需要考虑一些因素.首先，您必须了解，传递自定义主题对象的过程是将自定义classNames 追加到内部定义的名称中.

There is some stuff to consider when you are theming a component. First of all you have to understand that what we are doing passing a custom theme object is to append custom classNames to the ones defined internally.

自定义className应该实现比默认优先级更高的优先级，以成功覆盖它们.另外，您还必须考虑到内部类可能没有最低优先级.

Custom classNames should implement a higher priority than the default ones to successfully override them. Also you have to take into account that internal classes may not have the minimal priority though.

在您的示例中，您正在传递具有.title类定义且具有最低优先级的主题对象.如果检查源，您会发现默认选择器的优先级高于该选择器.要覆盖默认值，您至少需要具有相同的优先级，并将CSS捆绑在原始值之后.请在此处

In your example your are passing a theme object with a class definition for .title that has the minimal priority. If you check the source you'd see that the default selector has more priority than that. To override the default you need at least the same priority and to bundle your css after the original. Please check a complete answer here

这篇关于React-Toolbox:如何应用主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！