react引入css方式

• 一、有几种引入方式
• 二、如何引入
• 区别

一、有几种引入方式

常见的CSS引入方式有以下：

1. 在组件内直接使用
2. 组件中引入.css文件
3. 组件中引入.modeule.css文件
4. CSS in JS
5. sass引入方式

二、如何引入

1. 在组件内直接使用
   直接在组件中书写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}>123div>{backgroundColor:"red"}}>div>);}
}

这种方式优点：

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

缺点：

• 写法上都需要使用驼峰标识
• 某些样式没有提示
• 大量的样式, 代码混乱
• 某些样式无法编写(比如伪类/伪元素)

2. 组件中引入.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>);}
}

这种方式存在不好的地方在于样式时全局生效，样式之间会互相影响。

3. 组件中引入.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>);}
}

4. 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.jsSelfLink><SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>SelfButtonSelfButton>div>);}
}
export default Test;

5. sass引入方式

什么是Sass：Sass是一个CSS预处理器，是CSS扩展语言，可以帮助我们减少CSS重复代码，节省开发时间。

6. Sass语法：

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，成熟，成熟，社区庞大，框架

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！