react引入css方式

Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。什么是Sass：Sass是一个CSS预处理器，是CSS扩展语言，可以帮助我们减少CSS重复代码，节省开发时间。styled-components：目前github上有17k多的stat。aphrodite：目前github上

文章共2,234字 · 阅读需要大约8分钟

一键AI生成摘要，助你高效阅读

问答

Mr.BoBo

1099人浏览 · 2023-05-19 20:37:50

Mr.BoBo · 2023-05-19 20:37:50 发布

一、有几种引入方式

常见的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语法：

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>
    );
  }
}