React组件无法读取styles.css中部分类样式的问题排查

问题场景 #

使用React开发注册页面时，styles.css中body样式正常生效，但类选择器定义的样式全部失效，仅内联样式可用。相关代码如下：

RegisterPage.jsx组件代码 #

export default function RegisterPage() {
  return (
    <>
        <div className="row g-0">
            <div className="col-7 background">Background</div>
            <div className="col-5 registerForm">RegisterForm</div>
        </div>
    </>
  )
}

styles.css代码 #

body{
    background: #cccaaa;
}

.background{
    background: "#8d45b7";
}

.registerForm{
    background: "#fff";
    height: 100vh;
}

现有引入方式 #

在index.html中引入CSS：

<!-- My CSS -->
<link type="text/css" href="./src/styles.css" rel="stylesheet">

错误点与修复方案 #

1. CSS语法错误
   类选择器中，background属性的颜色值被双引号包裹，这不符合CSS语法规范，浏览器会将其识别为无效样式值，直接导致样式不生效。
   修复后的CSS代码：

   body{
       background: #cccaaa;
   }
   
   .background{
       background: #8d45b7;
   }
   
   .registerForm{
       background: #fff;
       height: 100vh;
   }
   

2. CSS文件引入方式错误
   React项目（尤其是create-react-app创建的项目）的构建机制不允许直接在index.html中引用src目录下的CSS文件——src目录属于源码目录，未经过构建处理的资源无法被浏览器直接访问。
   正确的引入方式是在组件或项目入口文件中通过ES6的import语句导入：

   • 在RegisterPage.jsx顶部导入：

     import './styles.css';
     

   • 或者在项目入口文件index.js中导入：

     import './src/styles.css';
     

完成以上两处修改后，类选择器定义的样式即可正常生效。

内容的提问来源于stack exchange，提问作者J.Salinas