在ReactJS中如何使用className修改HTML元素的外观样式？

• className本身只是给DOM元素添加类名，不会自带样式效果，教程里省略了引入对应CSS定义的步骤，你需要手动操作让样式生效，分两种常见场景处理：

场景1：教程使用自定义样式 #

1. 在你当前React组件所在目录新建CSS文件，例如命名为Card.css，写入.card类的样式规则：

.card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  /* 你可以根据需要自定义其他样式 */
}

2. 在使用className="card"的React组件文件顶部引入该CSS文件：

import './Card.css'

场景2：教程使用第三方UI框架 #

如果教程用的是Bootstrap、Material UI这类预设了card样式的UI库，你需要先安装对应依赖再引入全局样式：
以Bootstrap为例：

1. 终端执行安装命令：npm install bootstrap
2. 在项目入口文件（通常是src/index.js或src/main.jsx）顶部引入Bootstrap的全局CSS：

import 'bootstrap/dist/css/bootstrap.min.css'

排查注意事项 #

• 确认你写的是className而不是原生HTML的class，React中不支持用class指定类名
• 确认类名拼写和CSS中定义的完全一致，大小写敏感

内容的提问来源于stack exchange，提问作者Airlo