React项目当中一种样式处理方案

React项目当中一种样式处理方案 1 说明

React当中并没有像Vue提供了一个来实现组件的局部样式，React当中的样式一旦书写，即为全局样式。

在平常开发过程当中，我们肯定是希望，公共的样式全都放在一个样式文件当中，每个组件（页面）有自己独立的样式，不会影响到别的页面，也不会受到别的页面的影响，即没有样式污染问题。

一旦出现了样式污染，解决样式Bug就是一件很痛苦的事情，很可能这里修改好了，另外一个地方却出了问题。这里是我使用的一种React项目样式处理方案，优点是：

无样式污染问题自动引入，只需在指定目录创建样式文件，无需在组件当中引入 2 项目目录结构

└─src
    ├─api
    ├─assets
    │  ├─style
    │  └─viewStyles
    │   ├─index.js
    │   ├─login.scss
    │   ├─home.scss
    │   └─notFound.scss
    ├─components
    ├─router
    ├─views
    │  ├─login.jsx
    │  ├─home.jsx
    │  └─notFound.jsx
    ├─App.jsx

3 详细说明

所有的组件（页面）样式文件都存放在 src/assets/viewStyles 当中，样式文件的名称与组件的名称一致，譬如：login.jsx 对应的样式文件为：login.scss

3.1 解决样式污染问题

login.jsx 文件内容如：

const Login = () => {
  return (
    
      
Login
      
    
  );
};
export default Login;

login.scss 文件内容如：

.login{
  width: 100%;
  height: 100%;
  .form-container{
    width: 500px;
    height: 400px;
    background-color: royalblue;
  }
}

可以发现，整个 login.jsx 是包裹在了 .login 这个CSS样式类当中，而 login.scss 当中，所有的样式也是包裹在了 .login 当中，所以，只要别的页面不使用这个 .login，那么 login.scss 当中的样式既不会影响到别的页面，也不会受到别的页面的影响。

其实就是借助了 SCSS 的嵌套，来实现了组件的局部样式，这要求我们每个组件都必须有一个唯一的CSS类名，不能重复。

注意：

如果是个人进行开发，那么可能知道自己每个页面使用了哪些CSS类名，但是如果是团队一起开发，那么很有可能使用了一样的CSS类名，为了解决这个问题，可以考虑类名采用以下的形式： 先借助UUID、Nanoid等库，或者是生成唯一ID的网站工具，来生成一个唯一的ID。譬如生成的ID为：296455b8-ab60-4a4d-9a13-82df34340111那么 login.jsx 的 className 可以为：login-296455b8-ab60-4a4d-9a13-82df34340111，同时 login.scss 当中也要修改为 login-296455b8-ab60-4a4d-9a13-82df34340111这样就避免了团队开发过程中CSS类名可能重复的问题。线上生成UUID的网站：http://www.uuid.online/ 在开发过程当中，假如存在 views/test1/page1.jsx、views/test2/page1.jsx 两个文件，这个两个文件同名，但是在不同目录，这样在创建样式的时候，在 viewStyles 无法创建两个同名的样式文件，此时可以在 viewStyles 当中再创建两个目录，分别为 test1 和 test2，再在这两个目录当中分别创建样式文件。 3.2 解决自动引入问题

在以前的开发过程当中，我们在组件当中需要通过import的方式来引入相关样式文件，这样不方便管理，也比较繁琐，尤其是文件层级相差很大的时候，需要 ../ 很多次。

这里将所有的样式文件存放在 src/assets/viewStyles 当中，又在此目录当中创建了一个 index.js，这个文件主要用于遍历所有文件，进行统一的导入。

index.js的内容如下：

/**
 * 批量自动引入样式文件
 * 利用require.context，导入当前目录中全部的scss文件，避免了手动进行引入
 */
const context = require.context('./', true, /\.scss$/);
context
  .keys()
  .filter((path) => path !== "./index.js")
  .forEach((path) => {
    import (`${path}`);
  });

export default context;

最后还需要在 src/App.jsx 当中引入这个 index.js

// App.jsx

// 导入全部的页面样式文件
import "./assets/viewStyles/index";

4 补充

关于React的样式处理，还有styled-components、CSS Module 等处理方案，可以根据自身的需要来进行选择，我个人觉得styled-components、CSS Module使用起来不太方便，所以使用了这种SCSS嵌套 + 唯一className的方式。