CSSモジュールとは何ですか?見てください！

今年の 4 月にある企業と面接しました。

技術面接中に、CSS モジュールを理解したかどうか尋ねられ、理解していないと答えました。

彼は続けて、通常の開発中にコンポーネントや要素にクラス名を付けるときはどうすればよいか、と尋ねました。
私は、あなたが書いたクラス名が他の同僚が書いたクラス名と競合しないように、要素とコンポーネントに特定のプレフィックスを追加するように言いました。

その後、それはなくなり、React の原則などについてたくさんの質問を受け、面接に合格しました。

今日は、より明確になるように、CSS モジュールとは何かを彼に説明します。

[推奨チュートリアル: CSS ビデオ チュートリアル ]

最初に画像を見てみましょう:

CSS モジュールの動作原理を理解するための画像:

私たちがコードを作成したとき、2 つのファイルがあり、1 つは ProductList.less ファイルで、もう 1 つは ProductList.jsx ファイルでした。
ビルド後、less ファイルは次のファイルに変換されます。青いタイトルのファイル。

これは次のことからわかります:

• button クラスの名前は、ビルド後に ProductList_button_1FU0u に変更されます。 button はローカル名、ProductList_button_1FU0u はグローバル名です。 名前の競合を心配することなく、短くてわかりやすい名前を使用できます。

あとは、css/less ファイルに .button {…} を記述し、コンポーネントの style.button を通じて参照するだけです。

グローバル CSS の定義

CSS モジュールはデフォルトでローカル スコープです。グローバル ルールを宣言したい場合は、:global 構文を使用できます。

例:

.title {
	color: red;
}
:global(.title) {
	color: green;
}

引用する場合:

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

一部の複雑なシナリオでは、1 つの要素が複数の className に対応し、それぞれの className が対応する場合があります。いくつかの条件に基づいて表示するかどうかを決定します。このとき、classnames ライブラリは非常に便利です。

import classnames from 'classnames';
const App = (props) => {
	const cls = classnames({
		btn: true,
		btnLarge: props.type === 'submit',
		btnSmall: props.type === 'edit',
	});
	return <div className={ cls } />;
}

このようにして、異なる型が App コンポーネントに渡されると、異なる className の組み合わせが返されます:

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

プログラミング関連の知識の詳細については、こちらをご覧ください: プログラミング教育 ! ！

以上がCSSモジュールとは何ですか?見てください！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。