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

コンポーネントのテーマを設定する際に考慮すべき点がいくつかあります。まず最初に、カスタム テーマ オブジェクトを渡すために行っていることは、内部で定義されたものにカスタム クラス名を追加することであることを理解する必要があります。

カスタム classNames は、それらを正常にオーバーライドするために、デフォルトのものよりも高い優先度を実装する必要があります。また、内部クラスの優先度が最小ではない可能性があることも考慮する必要があります。

あなたの例.titleでは、最小限の優先度を持つクラス定義を持つテーマ オブジェクトを渡しています。ソースを確認すると、デフォルトのセレクターがそれよりも優先されていることがわかります。デフォルトを上書きするには、少なくとも同じ優先度が必要で、元の CSS の後に CSS をバンドルする必要があります。ここで完全な回答を確認してください

于 2016-08-04T11:00:05.797 に答える