行内样式(css in js)
使用style={},如
<div style={{backgroundColor:"red",fontSize:"100%"}}></div>
引入样式
直接引入
不同于vue的scoped，react引入的样式未进行模块化处理，因此均为全局样式，需要自行隔离
import "./Objective.css";
<div className="main"}>
<div className="item selected"></div>
</div>
css module
导入css名改为.module.css结尾
import ObjStyle from "./Objective.module.css";
<div className={ObjStyle.main}>
<div className={`${ObjStyle.item} ${ObjStyle.selected}`}></div>
</div>
使用scss
对于create-react-app创建的应用，直接npm install --save node-sass即可在组件中引用scss，无需更改webpack配置
网友评论