反応クラス名の使用法は何ですか

react クラス名の使用法: 1. "install i classnames --save" を通じてクラス名をインストールします。 2. "import classnames from 'classnames';" を使用してクラス名を参照します。 3. "className={classnames( Styles.xxxxx)}" メソッドは、classnames ライブラリを使用して使用できます。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応クラス名の使用法は何ですか?

react クラス名の使用法

react で複数の className を使用したい場合は、classnames ライブラリを使用します

インストール

install i classnames --save

yarn add classnames --save

vs コード スタイル プロンプト ツールは CSS モジュールをインストールできます clinyong.vscode-css-modules

Quote

import classnames from 'classnames';

Use

最初の方法

import Styles from './pagin-cover.less';
<Pagination
className={classnames(Styles[&#39;scf-pagination&#39;],
{[Styles[&#39;xxxx&#39;]] : status === 1}
)}
/>
//或者
<Pagination
className={classnames(Styles.xxxxx)}
/>

2 番目の方法

import  './pagin-cover.less';
<Pagination
className={classnames({&#39;scf-pagination&#39;:true,&#39;xxxx&#39;: status === 1})}
/>

3 番目の方法

import  './pagin-cover.less';
<Pagination
className={classnames(&#39;scf-pagination&#39;,&#39;xxxxx&#39;)}
/>

推奨される学習: 「react ビデオ チュートリアル 」

以上が反応クラス名の使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。