CSSモジュール - 他のモジュールのクラスを参照しています

Question

私はCSSモジュールの概念をとても理解していますので、将来的には何もしたくないと私は確信しています。

現在、私はCSSモジュールを使用する既存のアプリをリファクタリングしようとしています。アプリは古くからBEMの方法を使っていました。

私が私の問題を説明する前に、私は、CSSモジュールのドメイン内に実際にはない問題に取り組んでいることを明らかにしたいと思います。 1つのモジュール内でのみ使用するスタイルを適用する必要があります。多くの場合、CSSクラスを他のモジュールの他のCSSクラスと組み合わせて構成する必要があります。しかし、基本的には（HTML-）モジュールを作成し、CSSモジュールを使用してそのモジュールのスタイルを設定します。

ここに問題があります： リファクタリングのプロセスでは、SASSベースのスタイルシステムを使用したことに由来する1つの問題があります。このクラスが別のモジュールの別のクラスの組み合わせで動作する必要がある場合、CSSモジュール環境内でCSSクラスを操作する有効なメソッドが見つかりません。 SASSで

例：

[page.scss]

.wrapper { 
    margin: 0; 
} 

[headline.scss]

.headline { 
    color: green; 
} 
.wrapper { 
    .headline { 
     color: orange; 
    } 
} 

あなたが見ることができるように：一つのモジュール（ページ）は、CSSクラスを定義します"ラッパー"、別のモジュールはCSSクラス "見出し"を定義します。また、クラス "見出し"は、クラス "ラッパー"の内部に置かれたときに、少し違うように動作するはずです。

また、これは実際にはCSSモジュールのドメインではないことがわかります。しかし、これがCSSモジュールで何とかできるかどうかを本当に知りたいですか？ CSSモジュールの "構成" - 機能は実際にはここには適合しません。

Answer 1

これはCSSモジュールに移行する際の一般的な問題です。要するに、CSSモジュールは別のCSSモジュールのスタイルを上書きすることはできません。これは設計によるものです。スタイルは、それらをレンダリングするコンポーネントとどこにも存在しないことになっています。

これをリファクタリングするには、コンポーネントスタイルのバリアントを作成し、ラッパー内でレンダリングされたときにそのバリアントを明示的に設定する必要があります。例えば

、あなたの見出しのコンポーネントは、現在、このようなものに見えるとします

CSS

.headline { 
    color: green; 
} 

JSX

import styles from "Headline.css"; 
const Headline =() => { 
    return (
    <div className={styles.headline} /> 
); 
} 

よりもむしろオーバーライドしようとして.headlineを

CSS

.headline-green { 
    color: green; 
} 

.headline-orange { 
    color: orange; 
} 

JSX

import styles from "Headline.css"; 
const Headline = ({orange}) => { 
    return (
    <div className={orange ? styles.headlineOrange : styles.headlineGreen} /> 
); 
} 

そして、あなたはからそれをレンダリング：、あなたが小道具を切り替えるバリアントクラス名をどこか別の場所からクラス名を作成することができますあなたのラッパーは、orangeの亜種に設定してください：

<Headline orange /> 

ヒント：composesを使用すると、バリアント間の共通スタイルの重複を排除できます。