react-32-样式隔离-引入css方式-vue对比

1.前言

样式污染是开发常遇到的问题
解决办法其实就是让class名不重复，针对这个不重复有很多方法

1.1 class命名不重复：工具实现命名唯一
1.2 CSS Modules模块化
1.3 Styled-component

---

在之前文章代码基础上进行修改react-路由传参

---

2. 问题表现

比如城市界面 设置一个 h1 标签字体红色

2.1 index.css

h1{
     color: red;
}

---

2.2 城市组件引用 样式文件

需要通过 import 导入

import React, { Component } from 'react'
import { Link } from "react-router-dom";
import "./index.css"

---

2.3 效果

2.gif

每个界面的 h1标签都变红色了

---

3. sass 安装

后续的写法准备用sass,所以先安装下
注意版本问题 我是装的"sass": "^1.36.0"

npm i sass -D

Tips

安装sass node-sass的时候千万注意自己npm版本问题
如果报了很多恶心的错误，非常难解决，还是老老实实降低自己的npm版本吧

或者装多个版本的npm ,但切换使用

---

4.react脚手架自带模块化 .module.css 解决方案

4.1 原理

将css文件作为一个模块引入，这个模块中的所有css，只作用于当前组件。不会影响当前组件的后代组件

---

4.2 步骤

1.把样式文件改为xx.module.css就行 用less或者sass也一样
我这里使用 sass来演示
将原来的 index.css 改为index.module.scss文件

2. 一般只用class来写样式

.testColor{
   color: red;
}
.test-bg{
  background-color: orange;
}

注意 sass的样式 后缀是scss

---

4.3 引用样式文件

import styles from "./index.module.scss"
console.log("样式对象:",styles)

---

4.4 样式书写

1. 命名的样式名注意用法 ，这个- 横杠的写法在js里面不合法所以用["a-b"]的形式使用

 render() {
        return (
            

                
城市列表
            
        )
    }

---

4.5 多个类样式的写法

 
 多个类样式

---

4.6 效果

1.png

回顾我们前言 的内容 ,其实 这些工具,都是帮我们起个不会重复的名字,来保证不会样式污染

4.7 缺点

1.引用的类名，不能使用连接符(.xxx-xx)，在JavaScript中是不识别的
2.所有的 className都必须使用 {style.className} 的形式来编写
3.不方便动态来修改某些样式，依然需要使用内联样式的方式；

---

---

5.编写css的规则

1.可以编写局部css，不会随意污染其他组件内的原生；
2.可以编写动态的css，可以获取当前组件的一些状态，根据状态的
变化生成不同的css样式；
3.支持所有的css特性：伪类、动画、媒体查询等；
4.编写起来简洁方便、最好符合一贯的css风格特点

---

6. 对比vue中使用css的方式

6.1 vue

1.通过style标签编写样式
2.scoped属性进行样式隔离
3.lang属性设置预处理器
4.内联样式风格的方式来根据最新状态设置和改变css

---

6.2 react

1.在组件内直接使用
2.组件中引入 .css文件
3.组件中引入 .module.css文件
4.CSS in JS

下面分别对这几种方式进行分析
其中 引入 css和 module.css文件上面已经讲过

---

7. react组件内直接使用

直接在组件中书写css样式，通过style属性直接引入

7.1 样式编写

import React, { Component } from "react";

const card ={
    color: "#303133",
    backgroundColor: "#fff",
    border:"1px solid #DCDFE6",
    borderRadius:"5px",
    width:"182px",
    padding:"10px",
    margin:"0 auto",
    boxShadow:"0 2px 12px 0 rgb(0 0 0 / 10%)"
}

---

7.2 样式使用

export default class MyComponent extends Component {
    render() {
        console.log("我的界面:",this.props)
        return (
            

                
关于我的传说
                

                    天行健,君子以自强不息;地势坤,君子以厚德载物;
                
            
        )
    }
}

---

7.3 style 直接绑定

       
样式对象变量

---

7.4 效果

1.png

---

7.5 总结

注意
css属性需要转换成驼峰写法

这种方式优点

1.内联样式, 样式之间不会有冲突
2.可以动态获取当前state中的状态

缺点

1.写法上都需要使用驼峰标识
2.某些样式没有提示

3.大量的样式, 代码混乱
4.某些样式无法编写(比如伪类/伪元素)

---

8.组件中引入css文件

单独写个css ,然后组件中引入,刚开始学css分离的时候就这样哈哈
test.css

.title {
  color: orange;
  font-size: 66px;
}

组件引入

import React, { PureComponent } from 'react';

import './test.css';

export default class App extends PureComponent {
  render() {
    return (
      

        
单独的css文件
       
      
    )
  }
}

PureComponent这里作为一个引子

---

9.CSS in JS

CSS-in-JS， 是指一种模式，其中CSS由JavaScript生成而不是在外部文件中定义
需要注意的是, 这个功能需要安装第三方库,常用的如下
1.styled-components
2.emotion
3.glamorous

---

10.styled-components的基本使用

本质是通过函数的调用，最终创建出一个组件：
1.这个组件会被自动添加上一个不重复的class
2.styled-components会给该class添加相关的样式

安装

 npm install --save styled-components

简易用法

创建了一个Box样式组件，组件渲染之后是一个div标签
Box组件跟使用react的组件一样，只不过现在他们有了自己的样式

  const Box= styled.div`
    color: blue;
  `;

  render(
    
        Hello  styled-components!
    
  );

---

类名

  const Box = styled.div`
    color: red;

    h3 {
    color: yellow
    }

    .o2{
    color: orange
    }
  `

  render(
    
      
红色 p 标签 
      
黄色 h3 标签
 
      
橘色 p 标签
    
  )

---

11. 组件使用

---

style.js

首字母必须大写

export const Mytitle= styled.div`
  height: 66px;
  border: 1px solid greenyellow;
  color: orange;
`;

---

引入

import React, { Component } from "react";

import { Mytitle } from "./style";

class TestStyle extends Component {
  constructor(props, context) {
    super(props);
  }  
 
  render() {
    return (
     

       建党100年
     
    );
  }
}

export default TestStyle;

---

参考资料

网络各路大神

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉