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 的主要场景，从简单应用到复杂条件类名管理。根据项目需求选择合适的方式即可。