問題タブ [react-css-modules]

現在、スタイリングにReactでCSSモジュールを使用しています。したがって、各コンポーネントは、次のようにコンポーネント固有の css ファイルにインポートされます。

個々のコンポーネントのスタイルを設定する場合はこれで問題ありませんが、コンポーネント固有ではないグローバル スタイル (html、body、header タグ、div など) を適用するにはどうすればよいですか?

以下は、エラー メッセージを表示するための単純なコンポーネントです。

messageプロパティが必要であることに注意してください。このコンポーネントをどこかで使用すると、次のようになります。

Flowtype は、Error必要なプロパティmessageが欠落していることを警告するはずですが、そうではありません。コンポーネントを react-css-modules でラップしない場合Error、Flowtype は期待どおりに機能します。

ラップされたコンポーネントを理解するために Flowtype の型を宣言する必要があると考えていますが、私の Google-fu では結果が得られませんでした。

私が見つけたもの：

• https://github.com/facebook/flow/issues/1601
• フロー タイプ: cloneElement を使用した HOC

React CSS モジュールを使用するコンポーネントの生成されたクラスをテストしようとしています

サンプルFooコンポーネントは次のとおりです。

テストコード ( Foo.spec.jsx):

Foo.css コード:

そして、ここにテストhtml出力があります：

ご覧のとおり、クラスのない空の div が生成されるため、アサーションは機能しません。

また、これはテストでのみ失敗するという事実を取り上げたいと思います。コンポーネントは、Web アプリで生成された html コードで期待される html クラスを生成します。

これを修正する方法はありますか？

アップデート

ファビオのコメントで示唆されているように、オプションを削除しようとしましたerrorWhenNotFound: false

テストで次のエラー メッセージが表示されるようになりました。

エラー: "bar" CSS モジュールが定義されていません。

bar クラスがFoo.cssファイルで定義されているため、わかりません。

Fooまた、コンポーネントのスタイルをデバッグすると、次のことがわかりました。

空の出力を返します。

スタイル {}

この単純化された例と本格的なコードの両方で、コンポーネントは、対応するスタイルが正常に機能する HTML コードを生成した Web アプリで期待される html クラスを生成します。

反応内で css モジュールを使用しようとしていますが、機能していません。

このコードのログ:

オブジェクト {} を返します

レンダリングされたコードは、クラスのないタグです。

css コードはサイトで入手できます。ここに私の test.css があります。

div を class='test' に変更すると、p の色が青に変わります

これが私のwebpack.config.jsです

誰でも私を助けることができますか？

前もって感謝します。

CSSスタイルで使用する色やその他の設定を保存するためだけにファイルが必要です。異なるファイルで同じ色を何度も指定したくないからです。cssモジュールでそれを達成するにはどうすればよいですか?

例: 設定.css

ボタン/styles.css

そこで、CSS モジュールの webpack ローダーを使用します。

css?modules&importLoaders=1&localIdentName=[path]_[name]_[local]_[hash:base64:5]

styleName各プロパティを、通常生成されるジェネリック クラス名だけでなく、別の単純なクラスにもコンパイルしたいと考えています。

例: コード

<div styleName="CLASS-NAME" />

にコンパイルされるようになりました

<div class="path_filename_CLASS-NAME_12345" />

そして、私はそれをコンパイルしたい

<div class="_CLASS-NAME path_filename_CLASS-NAME_12345" />

アプリとコンポーネントの名前の間隔については、次の規則があります。

CSS モジュールを使用したいのですが、これをどのように変換して、アプリとコンポーネントの名前のスペーシングの特定性を維持するのかがわかりません。#app-nameID全体を単純に省略できることは理解していますが、この種の特異性が必要です。

考え？