React プロジェクトがコンポーネント スコープのバックグラウンドとして CSS モジュールを継承する必要があるのはなぜですか?

Question

React コンポーネントを作成しましたが、Web サイト全体が CSS モジュールで設定した本文スタイルを継承するという問題が発生しました。ローカルタグを使用した場合と使用しない場合でこれを試しましたが、他の人が同じ問題を抱えているのを見たことがないため、これはReactがCSSモジュールをラップする方法に関係があるのではないかと感じています。

:ローカルボディ
{
    ディスプレイ: フレックス;
    コンテンツの位置揃え: 中央;
    整列項目: 中央;
    最小高さ: 100vh;
    背景: #300d25;
    トランジション: 0.5秒。
}
:ローカル本体::前
{
    コンテンツ：'';
    位置: 絶対;
    トップ: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    背景: #30bfa5;
    トランジション: 0.5秒。
    クリップパス: 円(中心250ピクセル);
}

Answer 1

CSS モジュールが関連付けられた React コンポーネントを作成しましたが、CSS モジュールの 1 つで定義したスタイルがコンポーネントだけでなくサイト全体に影響を与えているようです。この問題は、CSS モジュールの誤った使用、クラス名の競合、グローバル スタイル、スペル ミス、ブラウザ拡張機能、または CSS 固有の問題によって発生する可能性があります。この問題を解決するには、CSS モジュールの名前と使用が正しいことを確認し、競合やタイプミスがないか確認し、グローバル スタイルを確認し、CSS のリセットまたは正規化を使用し、適用されたスタイルを確認し、Webpack 構成を確認します。問題が解決しない場合は、特定のトラブルシューティングの詳細を提供することを検討してください。