react如何使用css?
在react 中使用css有以下几种方法
一、全局使用
app.js
import React from 'react'; import Router from "./router" import './App.css'; function App() { return ( <div className="App"> <div className='head'><span>app</span></div> <Router/> </div> ); } export default App;
直接在入口文件引入,我这里是app.js 引入或css文件会作用至所有的组件,适合引入全局样式
二、组件使用css
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'> <span>主页</span> </div> <div><span>{this.date}</span></div> </div> ) } } export {Home}
这种方法和第一种没有太大的区别都是作用在全局上,但是这样引入的css优先级并没有第一种的高
三、CSS Modules
CSS Modules 的做法就是通过配置将.css文件进行编译,编译后在每个用到css的组件中的css类名都是独一无二的,从而实现CSS的局部作用域。
//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中使用 <span className={head.head}>主页</span> </div> <div><span>{this.date}</span></div> </div> ) } } export {Home}
本文来自React答疑栏目,欢迎学习!
以上就是react如何使用css?的详细内容,更多请关注易知道|edz.cc其它相关文章!