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文件
- 一般只用
class来写样式
.testColor{
color: red;
}
.test-bg{
background-color: orange;
}
注意
sass的样式 后缀是scss
4.3 引用样式文件
import styles from "./index.module.scss"
console.log("样式对象:",styles)
4.4 样式书写
- 命名的样式名注意用法 ，这个
-横杠的写法在js里面不合法所以用["a-b"]的形式使用
render() {
return (
<div className={styles.testColor}>
<h1 className={styles["test-bg"]}>城市列表</h1>
</div>
)
}
4.5 多个类样式的写法
<p className={`${styles.testColor} ${styles["test-bg"]}`}> 多个类样式</p>
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 (
<div>
<h1>关于我的传说</h1>
<p style={card}>
天行健,君子以自强不息;地势坤,君子以厚德载物;
</p>
</div>
)
}
}
7.3 style 直接绑定
<p style={{background:"red",color:"#FFF"}}>样式对象变量</p>
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 (
<div className="app">
<h2 className="title">单独的css文件</h2>
</div>
)
}
}
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(
<Box>
Hello styled-components!
</Box>
);
类名
const Box = styled.div`
color: red;
h3 {
color: yellow
}
.o2{
color: orange
}
`
render(
<Box>
<p>红色 p 标签 </p>
<h3>黄色 h3 标签</h3>
<p className="o2" >橘色 p 标签</p>
</Box>
)
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 (
<div>
<Mytitle title="有幸生在华夏">建党100年</Mytitle>
</div>
);
}
}
export default TestStyle;
参考资料
网络各路大神
