react react使用css

董力發表於 2019-8-9 11:34:00

<h2>现在使用脚手架（react-create-app）的项目不需要在在css文件后面添加module就会自动为其添加模块化后缀</h2>
在react 中使用css有以下几种方法
第一种全局使用
app.js
<div class="cnblogs_code">
<pre>import React from 'react';
import Router from "./router"

import './App.css';

function App() {
return (
 <div className="App">
 <div className='head'>app</div>
 <Router/>
 </div>
 );
}

export default App;</pre>
</div>
直接在入口文件引入，我这里是app.js 引入或css文件会作用至所有的组件，适合引入全局样式
第二种使用组件使用css
<div class="cnblogs_code">
<pre>import React from 'react';
import './home.css' //直接引入css文件
class Home extends React.Component {
constructor(props) {
 super(props);
 this.state = {
 date: new Date().getTime()
 }
}

componentDidMount() {
 function f(){
 console.log("ffff");
 }
 console.log(false||f())
}

render() {
 return (
 <div>
//在jsx中使用
 <div className='head'>
 主页
 </div>
 <div>{this.date}</div>
 </div>
 )
}
}

export {Home}</pre>
</div>
这种方法和第一种没有太大的区别都是作用在全局上，但是这样引入的css优先级并没有第一种的高
第三种现在前端都在追求模块化的思想，上述的两种方法，在组件数量非常大的时候，样式污染问题就太痛苦了，所以在进行react开发的时候，普遍都是用，组件独享css样式的方法
CSS Modules
CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。具体原理可以看看阮一峰老师的博客     CSS Modules 用法教程。
<div class="cnblogs_code">
<pre>//home.module.css{
head:{ //你定义的类名被import的时候会变成对象的属性
 color:red;
}
}

//home.js:
import React from 'react';
import head from'./home.module.css' //将home.css改成，react使用的webpack 会自动识别module.css文件后缀然后将其编译
class Home extends React.Component {
constructor(props) {
 super(props);
 this.state = {
 date: new Date().getTime()
 }
}

componentDidMount() {
 function f(){
 console.log("ffff");
 }
 console.log(false||f())
}

render() {
 return (
 <div>
 <div>
//在jsx中使用
 主页
 </div>
 <div>{this.date}</div>
 </div>
 )
}
}

export {Home}</pre>
</div>
还用其他几种引入css的方法，但其目的和第三种都差不多，都是为了防止样式污染，在此就不一一叙述了，感兴趣的同学可以自己百度 
来源：https://www.cnblogs.com/wrhbk/p/11326202.html

頁: [1]

琼殿技术论坛's Archiver

react react使用css