Reactアプリに読み込まれたCSSが適用されません

React Static Boilerplateでリアクションアプリを構築しています。Reactアプリに読み込まれたCSSが適用されません

各コンポーネントは、このようなディレクトリ構造を持っています

MyComponent/ 
-- MyComponent.css 
-- MyComponent.js 
-- package.json

とMyComponent.jsファイルで、私は生import './MyComponent.css'

をやっているのですが、私のCSSは、このようなものが含まれているとしましょう：

body { background-color: orange; } 
.card { background-color: purple; }

と私のコンポーネントのレンダリング機能がカードをレンダリングします：

render() { 
    return (
    <div className="card">Hello World</div> 
); 
}

ページの本文はオレンジ色になりますが、カードは紫色になりません。

このCSSは、生成されるHTMLに完全に適用されないのはなぜですか？

2017-04-13 Kristian

'.card'ルールに'！important'を追加することはできますか？ – Li357

私は試してみましたが、 '.card'のためのcssを全く見ないと表示されません。 – Kristian

Hmm。あなたはスタイルローダーとCSSローダーがインストールされ、webpackに正しく適用されていますか？他のCSSルールが適用されていますが、確認するためにチェックするので、私はそう思うでしょう。開発者ツールも見てください。 – Li357

React Static Boilerplateのウェブサイトによると、彼らはCSSモジュールを使用しています - これはbodyタグが尊重されているが、クラスセレクタがそうでない理由を説明します。

そうのようなスタイルシートをインポートしてみてください。

import styles from './MyComponent.css';

はそうのようなコンポーネントでそれを使用して：

<div className={styles.card}>something!</div>

2017-04-13 19:33:37 Toby

私はCSSの問題をいませんでした適用されているが、それはモジュールではなかった、それはマルチ複数のクラス。以下の構文は問題を解決しました

<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>

2017-11-30 15:22:53 user1169692

答えて