What is the usage of react classnames

Usage of react classnames: 1. Install classnames through "install i classnames --save"; 2. Use "import classnames from 'classnames';" to reference classnames; 3. Pass "className={classnames( Styles.xxxxx)}" method can be used by using the classnames library.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

What is the usage of react classnames?

Usage of react classnames

When you want to use multiple classNames in react, you will use the classnames library

Installation

install i classnames --save

yarn add classnames --save

vs code styles prompt tool can install css modules clinyong.vscode-css-modules

Quote

import classnames from 'classnames';

Use

The first way

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)}
/>

The second way

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

The third way

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

Recommended learning: "react video tutorial"

The above is the detailed content of What is the usage of react classnames. For more information, please follow other related articles on the PHP Chinese website!