一、有几种引入方式
常见的CSS
引入方式有以下:
- 在组件内直接使用
- 组件中引入.css文件
- 组件中引入.modeule.css文件
- CSS in JS
- sass引入方式
二、如何引入
- 在组件内直接使用
直接在组件中书写css
样式,通过style
属性直接引入:
import React, { Component } from 'react';
const div1 = {
width: "300px",
margin: "30px auto",
backgroundColor: "#44014C", //驼峰法
minHeight: "200px",
boxSizing: "border-box"
};
export default class App extends Component {
render() {
return (
<div>
<div style={div1}>123</div>
<div style={{backgroundColor:"red"}}>
</div>
);
}
}
这种方式优点:
- 内联样式, 样式之间不会有冲突
- 可以动态获取当前state中的状态
缺点:
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式, 代码混乱
- 某些样式无法编写(比如伪类/伪元素)
-
组件中引入
.css
文件
将css
当都写在一个css
文件中,然后在组件中直接引入:
App.css
文件:.title { color: red; font-size: 20px; } .desc { color: green; text-decoration: underline; }
组件中引入:
import React, { Component } from 'react';
import './App.css'; //引入css文件
export default class App extends Component {
render() {
return (
<div>
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p >
</div>
);
}
}
这种方式存在不好的地方在于样式时全局生效,样式之间会互相影响。
- 组件中引入
.modeule.css
文件
将css
文件作为一个模块引入,这个模块中的左右css
,只作用于当前组件。不会影响当前组件的后代组件。
这种方式是webpack
特工的方案,只需要配置webpack
配置文件中modules:true`即可
App.module.css
文件
.title {
color: red;
font-size: 20px;
}
.desc {
color: green;
text-decoration: underline;
}
组件中引入:
import React, { Component } from 'react';
import styles from './App.module.css'; //引入css文件
export default class App extends Component {
render() {
return (
<div>
<h2 className={ styles ["title"]}>我是App的标题</h2>
<p className={ styles ["desc"]}>我是App中的一段文字描述</p >
</div>
);
}
}
- CSS in JS
css in js解决方案其实就是将css样式写在js文件里面的一种技术现在比较热门的css in js解决方案的库有一下三种:
aphrodite:目前github上有4k的star
radium:目前github上有6k的star
styled-components:目前github上有17k多的stat
基本使用如下:
创建一个style.js
文件用于存放样式组件:
export const SelfLink = styled.div`
height: 50px;
border: 1px solid red;
color: yellow;
`;
export const SelfButton = styled.div`
height: 150px;
width: 150px;
color: ${props => props.color};
background-image: url(${props => props.src});
background-size: 150px 150px;
`;
引入样式组件也很简单:
import React, { Component } from "react";
import { SelfLink, SelfButton } from "./style";
class Test extends Component {
constructor(props, context) {
super(props);
}
render() {
return (
<div>
<SelfLink title="People's Republic of China">app.js</SelfLink>
<SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>
SelfButton
</SelfButton>
</div>
);
}
}
export default Test;
- sass引入方式
什么是Sass:Sass是一个CSS预处理器,是CSS扩展语言,可以帮助我们减少CSS重复代码,节省开发时间。
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器,是 CSS扩展语言,可以帮助我们减少 CSS 重复的代码,节省开发时间。
基本使用代码如下(示例):
//App.scss文件基本编写
$dark: #000;
$side: left;
.box {
background: $dark;
border-#{$side}-radius: 5px;
}
--------------------------------------
// 生成的css代码
.box {
background: #000;
border-left-radius: 5px;
}
//组件引入
import React, { Component } from 'react';
import 'App.scss' //引入scss样式文件
export default class App extends Component {
render() {
return (
<div>
<p className='pBox'>你好!!</p>
</div>
);
}
}
区别
通过上面四种样式的引入,可以看到
- 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱
- 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠
- 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写
- 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等
- SASS样式:兼容CSS,兼容CSS,成熟,成熟,社区庞大,框架