React无法应用外部styles.css样式，导入后样式不生效如何解决

• 优先修正CSS语法错误：当前.upper-deck选择器内的font-size: "90px"写法不符合CSS规范，长度值外层包裹的双引号会让浏览器直接将该规则判定为无效声明，完全不生效。正确写法为去掉值外层的引号，示例：

  .upper-deck {
    font-size: 90px;
  }
  

• 核对CSS文件引入路径：确认import "./css/styles.css"对应的实际文件位置没有错位，即index.js同级的项目源码目录下，需存在名为css的子文件夹，且styles.css存放在该子文件夹内。如果实际存放位置有偏差，可根据真实路径调整import语句的路径值，比如文件与index.js同目录时，引入语句应写为import "./styles.css"。
• 确认类名绑定匹配：代码中定义的.App类样式，因为当前渲染的div、h1标签都没有添加App类名，所以这部分样式本身就不会应用，不属于加载失败的异常情况。
• 排查样式加载异常：修正以上问题后如果样式仍未生效，可打开浏览器开发者工具的元素检查面板，选中目标h1标签，查看样式面板中的记录：
  • 是否存在styles.css文件的网络加载成功记录
  • 当前.upper-deck的规则是否被更高优先级的样式覆盖
  • 是否有被划掉的无效样式声明

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