react如何使用classname
使用 className 在 React 中设置样式
在 React 中，className 是用于为元素指定 CSS 类名的属性，类似于 HTML 中的 class 属性。由于 class 是 JavaScript 的保留关键字，React 使用 className 作为替代。
基本用法
<div className="my-class">内容</div>动态设置 className
可以通过 JavaScript 表达式动态设置 className：
<div className={`base-class ${isActive ? 'active' : ''}`}>内容</div>使用 CSS Modules 在支持 CSS Modules 的项目中，可以直接导入样式文件并使用：
import styles from './MyComponent.module.css';
function MyComponent() {
return <div className={styles.myClass}>内容</div>;
}使用 classnames 库
对于复杂的 className 组合，可以使用 classnames 库：
import classNames from 'classnames';
function MyComponent({ isActive }) {
const className = classNames('base-class', {
'active-class': isActive,
'disabled': !isActive
});
return <div className={className}>内容</div>;
}注意事项
- 确保 CSS 文件已正确导入到组件中
- 避免在
className中使用内联样式对象 - 对于条件类名，模板字符串或专用库比字符串拼接更清晰
这些方法涵盖了 React 中使用 className 的主要场景，从简单应用到复杂条件类名管理。根据项目需求选择合适的方式即可。
