問題タブ [react-css-modules]

プロジェクトでreact-css-modulesを使用しているときに、次のように単純化できる何かをしようとしていることに気付きました。

CSS クラスsome-nameは で定義され、内ParentComponent.cssに配置されるルールが含まれています。ChildComponentParentComponent

ChildComponent実装は次のようになります。

some-nameレンダリングされるものの最初の要素(ラッピング)のクラスで定義された CSS を受け取ることを期待していましたChildComponentが、これは行われず、「some-class」は単に無視されます。

余分なラッピングを追加してスタイルを適用することでこの問題を回避できますが、可能であればこれを避けたいと思います。

うまくいけば、ユースケースと問題を十分に説明したので、これを行う方法に関する推奨事項は大歓迎です.

これはcssをインポートするコンポーネントです...

私のスタイルシートsample.cssは次のとおりです...

しかし、Webアプリを実行すると、次のエラーが発生します...

私はcssモジュールをセットアップするための指示に従ったので、私のwebpack.configは次のようになります...

CSS が正しく読み取られない理由を教えてください。正しく認識されるようにコードを変換する必要がありますか?

編集

ノードjsを使用してサーバーを介して上記のコンポーネントをレンダリングしていることは、ノードにとって重要だと思います...

これはcssに干渉する可能性がありますか?

私はreact-routerとCSS-modulesとwebpackでreactを使用しています。これはすべてうまく機能していましたが、言語を変更できるようにするための要件が​​発生しました。最初に状態属性を別の言語に変更するだけでこれを実行しようとしましたが、それを変更すると現在のルートは再レンダリングされないため、言語の変更は次のルート変更が発生したとき、つまりリンクをクリックしたときにのみ有効になります。

プラン B: ロケールをルーティングに追加しようとしている / そのため、URL に表示されるようになりました。これは、ルートの更新 -> 再レンダリングにより有効になるはずです。ただし、CSS モジュールをロードするとエラーが発生します。

これは私のルーター設定です：

これは私のアプリでの私の機能です:

私のデフォルトのルートは油圧なので、エラーが発生しています：

キャッチされないエラー: 「is-english/hydraulics」CSS モジュールが定義されていません。

私のwebpack cssモジュールローダーの構成なのだろうか：

水力学.jsx で、次のように CSS をインポートしています。

私が理解していないのは、css モジュールが「is-english」からロードされる理由です。その「is-」プレフィックスはどこから来ているのですか? また、ファイルは英語のサブフォルダーにはなく、水力学.jsx と同じフォルダーにあります。

それとも、ルートの配置方法と関係があるのでしょうか?

私のreactjsプロジェクトにcssモジュールを使用しています。グローバルcssクラスを使用しようとしているファイルは次のとおりです。

ここに私のstyles.cssがあります

しかし、それは機能していません。インポートを間違えていると思います。グローバル css をインポートしてアプリケーションで使用するにはどうすればよいですか?

さて、私は初心者なので愚かな間違いをお詫び申し上げます。

すべて問題ないようで、エラーはありませんが、ページの要素はまだスタイル設定されていません。

webpack.config.js

Layout.js

レイアウト.css

コンパイルされた app.css

図でわかるように、クラスが生成され、要素に適用されますが、ページには何も表示されていません。 画像

これまでのところ、コンポーネントを状態に接続するために Redux の「接続」を使用してきました。次の方法でコンポーネントをエクスポートします。

react-css-modules を使用したいのですが、各コンポーネントで次のエクスポートを使用する必要があります。

コンポーネントをエクスポートして両方の機能を持たせるにはどうすればよいですか?

ありがとう ：）

Babel および ES6 構文を使用して React でインジケーター コンポーネントをプログラミングしており、CSS モジュールを使用しているコンポーネントのスタイルを設定しています。コンポーネントは正常に動作していますが、コードの品質を改善したいと考えています。

インジケーターの各状態で、ドットの色が変わります。

スタイルを定義する CSS は、CSS モジュールと compose キーワードを使用します

このアプローチについて 2 つの質問があります。

• 使用されているすべての色をクラスに再割り当てしてから、条件に応じて割り当てるのは少し面倒です。何か足りないものはありますか？
• React で状態と classNames の割り当てを処理するより良い方法はありますか? これは単純な例ですが、他のコードに非常に厄介な条件がいくつかあり、それらを避けたいと考えています。

私はreact-css-modulesを調べてきましたが、これまでのところ、コード全体に styles.class があってもかまわないと思います。