Question

我使用的是反应工具箱，并且在我的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：

我曾尝试过：

theme={theme}
theme={theme.title}

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

我做错了什么？

Answer 1

当你对组件进行主题化时，需要考虑一些事项。首先，您必须了解我们在传递自定义主题对象时所做的是将自定义类名追加到内部定义的类。

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

在您的示例中，您传递的主题对象具有.title的具有最小优先级的类定义。如果您检查源，您会看到默认选择器的优先级高于此值。要覆盖默认值，您至少需要相同的优先级，并在原始版本之后捆绑您的CSS。请检查完整的答案here

Answer 2

使用卡片标题中的override func awakeFromNib() { super.awakeFromNib() configureCell() }代替className={theme.title}

来应用您的样式

React-Toolbox：如何应用主题

2 个答案: