迁移HTML模板至React后部分CSS样式未生效如何排查

• 检查类名属性写法
  React DOM节点需使用className属性指定样式类，而非原生HTML的class属性。如果Dashboard.js中仍使用class绑定样式类，React不会将其识别为节点类名，会导致所有类选择器对应的CSS失效，仅全局标签选择器的样式能生效，完全匹配你描述的仅2-3行样式生效的特征。
• 检查CSS选择器优先级
  打开浏览器F12开发者工具，选中未生效样式对应的DOM节点，查看「样式」面板中预期生效的CSS是否被划横线标记，若存在该情况说明样式被更高优先级的规则（行内样式、ID选择器、权重更高的类选择器）覆盖，调整对应选择器权重即可。
• 检查样式文件引入路径
  如果你的部分样式写在Dashboard.css中，需要在Dashboard.js头部主动引入import './Dashboard.css'，未引入的样式文件不会被打包工具加载。
• 检查CSS语法错误
  若CSS文件中存在未闭合的大括号、拼写错误的属性/属性值，错误位置之后的所有CSS规则都会失效。可检查App.css中生效样式的位置，排查其后续代码是否存在语法问题。

你提供的App.js代码本身无逻辑问题，参考格式如下：

import './App.css';
import Dashboard from './Dashboard.js';

function App() {
  return (
      <Dashboard />
  );
}

export default App;

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