に取り組んでいるアプリがありReactJSます。インライン スタイルにCSS モジュールを使用しています。アイコン付きの別svgのファイルがあり、コンポーネントのファイルでスタイルを設定したいと考えていcssます。

ここにアイコンMyComponent/add.svgがあります:

ここに私のMyComponent/MyComponent.cssがあります

そして、それは私のMyComponent/MyComponent.jsxからのコードです

それは正常に動作します。しかし、アイテムにスタイルを適用しようとするとsvg(例: 塗りつぶし)、機能せず、何も変わらないという問題に直面しました。

このケースを実装する方法を推奨する必要がありますか?

この質問をご覧いただきありがとうございます。

反応レールプロジェクトでテーマを実装するための安定したスケーラブルな方法が必要です。現在、反応コンポーネントには独自のCSSファイルがあり、スタイリングはCSSモジュールを使用して管理されています...反応コンポーネントに異なるCSSテーマを持たせる最良の方法は何ですか?

具体的に質問する

• さまざまなテーマを実装するための CSS ファイルのより良いファイル構成は何でしょうか?
• これらのテーマを既存の反応コンポーネントに適用して、1 つのテーマをルート ノードに適用するだけで、コンポーネント ツリーの下にあるすべての反応コンポーネントにテーマが適用されるようにする方法を教えてください。

次のシナリオを処理するモジュール式の方法は何ですか: アプリには、すべての見出しタグ (h1、h2、h3 など) の一般的なスタイルがあります。特定のコンポーネントである Widget.jsx は、これらの見出しのいずれかを使用できますが、h1 タグには特別なスタイルが設定されています。CSS の「昔」の時代には、これは (おそらく) 単一のスタイルシートの継承によって処理されていました。例えば

明らかに、上記は CSS へのモジュラー アプローチには適合しませんが、上記のシナリオをモジュールで実現する方法がわかりません。以下は、問題を解決するための私の最初の試みです。

Widget.jsx

_widget.less

原子/テキスト/_text.less

これは、変更されていない一般的なクラス ( .h2) の 1 つを使用するところまで機能します。明らかに、問題は で.h2定義されておらず_widget.less、これらのクラスの「グローバルな」定義がないことです (モジュラー CSS のベスト プラクティスに従って) が、他の見出しクラスを.h2, .h3, .h4 ...クラスに明示的に構成することは、どちらかで答える。例えば

_widget.less

別の潜在的な解決策は@import、一般的な見出しスタイルを_widget.lessファイルに追加することです。

_widget.less

_text.lessこのソリューションの問題点は、スタイルを利用して成果物コードを肥大化させるたびに、それらのスタイルが複製されることです。

この種の問題を解決する最善の方法について何か考えはありますか? 私はモジュラーCSSの概念に非常に慣れていません。

core.scss

WebPack 構成:

エラー：

モジュールのビルドに失敗しました: CssSyntaxError: postcss-modules-local-by-default: src/styles/core.scss:1:0: :global :global { の前に空白がありません {

シナリオ

カスタム属性を使用してコンポーネントを区別しようとしていますcomponent。例：

これをスタイリングするのは簡単です:

問題

ここがトリッキーな部分です。コンポーネントが副作用を起こさないようにするために、サブコンポーネントにあるものをスタイルするべきではありません:

完全な例

これは単なる例です。外部コンポーネントの構造とスタイルを定義します。

HTML

CSS

最初のアプローチ

これが最初の素朴なアプローチです。

いくつかの論理的な問題がありますが、私が何をしようとしているのか理解できると思います。

私の感じでは、これは純粋な css では不可能です。しかし、カスタム Javascript を作成する前に、何か不足していないか、問題を考えすぎていないかお尋ねしたいと思います。