React 如何添加样式 class ?

在 React 中，您可以通过使用 className 属性来为元素添加样式类（CSS class）。该属性在 JSX 中接收一个字符串，该字符串包含一个或多个样式类名称，它们由空格分隔。以下是使用 className 属性的一个基本示例：

jsx
function MyComponent() {
  return (
    <div>
      <h1 className="title">欢迎来到我的网站</h1>
      <p className="description">这是一个很棒的地方。</p>
    </div>
  );
}

在上面的代码中，<h1> 元素被指定了一个 title 类，<p> 元素被指定了一个 description 类。

如果您需要根据组件的状态或属性动态地添加或移除类，您可以使用模板字符串或者逻辑运算符来构造 className 的值。例如：

jsx
function MyComponent({ isActive }) {
  const activeClass = isActive ? 'active' : 'inactive';
  return (
    <div className={`my-component ${activeClass}`}>
      这个组件现在是 {isActive ? '活跃' : '不活跃'} 的。
    </div>
  );
}

在这个例子中，组件的 className 将根据 isActive 属性的值动态地包含 active 或 inactive 类。如果 isActive 为 true，className 将是 "my-component active"，否则将是 "my-component inactive"。

确保您已经在组件的 CSS 文件中定义了这些类，以便它们可以正确地应用样式。