jsx属性名中的class属性

在JSX中，class属性应该写成className，因为class是JavaScript中的保留关键字。在React中，我们使用className来指定元素的CSS类。例如，以下代码将为一个div元素添加一个名为"container"的CSS类：

<div className="container">
  <p>Hello World!</p>
</div>

相关问题

jsx class 类名

在JSX中，使用class类名时，需要使用className属性来指定类名。例如，在给一个div元素添加类名为"title"的样式时，可以这样写：

<div className="title">Hello World</div>

注意，className的首字母C要大写。这是因为在JSX中，class是JavaScript的保留关键字，为了避免冲突，使用了className来代替class。[1]

jsx中修改多个相同class的样式

可以使用CSS模块化的方式，在模块中定义该class的样式，并在需要使用该class的组件中引入该模块。然后，使用该class名作为组件的className属性值即可。这样，多个相同class的样式都会被修改。例如：

1. 定义样式模块

/* styles.module.css */
.my-class {
  color: red;
  font-size: 16px;
}

2. 引入样式模块

import styles from './styles.module.css';

function MyComponent() {
  return (
    <div>
      <p className={styles.my-class}>Hello</p>
      <p className={styles.my-class}>World</p>
      <p className={styles.my-class}>!</p>
    </div>
  );
}

这样，MyComponent组件中的所有p元素都会应用my-class的样式，并修改为红色字体，16px大小。