2

我正在使用 react 工具箱，并且在我的 webpack 配置中我有（我只发布了配置的重要部分）：

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组件，我已经像这样定义它（只是为了测试主题）：

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；

在 style.scss 我有：

.title {
  color: yellow;
}

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

我确实尝试过：

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

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

我做错了什么？

4

2 回答 2

3

当您为组件设置主题时，需要考虑一些事情。首先，您必须了解我们传递自定义主题对象所做的是将自定义类名附加到内部定义的类名上。

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

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

于 2016-08-04T11:00:05.797 回答
0

在您的 CardTitle 中应用您的样式className={theme.title}，而不是theme={theme.title}

于 2016-07-04T10:11:23.113 回答