引用方式

第一种：内联方式

可以使用变量或者传统的内联方式

优点: 只生效于当前组件
缺点: 可能产生大量重复代码import react, { Component } from "react";const sty = {width: "100px",backgroundColor: "#FFFFFF",  //注意：需要使用驼峰法boxSizing: "border-box"
};class Test extends Component {constructor(props, context) {super(props);}render() {return (<div style={sty}>123</div><div style="background-color:red;">);}
}export default Test;

第二种：在组件引用 [name] .css文件

优点: 复用性强
缺点: 存在样式覆盖问题，不是只生效于当前组件import React, { Component } from "react";
import TestChidren from "./TestChidren";
import "@/assets/css/index.scss";
// styName写在 "/assets/css/index.scss" 中即可class Test extends Component {constructor(props, context) {super(props);}render() {return (<div><div className="styName">123</div><TestChidren>测试子组件的样式</TestChidren></div>);}
}
export default Test;

第三种：在组件中引用[name] .scss文件

安装node-sass就可以，因为有个node-sass，scss文件才能在node环境上编译成css文件。
然后编写scss文件

.App{background-color: #282c34;.header{min-height: 100vh;color: white;}
}

第四种：在组件中引用[name].module.css文件

优点: 可实现CSS的局部作用域，并且可复用重点：
1、选择器驼峰命名
2、样式文件后缀名为.module.css
3、在js文件中导入并使用注：
1、css modules会默认给类名加上一个唯一标识符（哈希字符串），从而实现类名不重复
2、class名称需要使用驼峰命名，不支持 '-' 等连接符命名规则: xxx.module.css引入方式：import xxx from 'xxx.module.css'用法：<div className={xxx.styleName}>

写法

三种内联写法

class App extends PureComponent{constructor(props) {super(props);/* 动态改变元素样式 */this.state = {textColor:"pink"}}render(){/* 将样式抽取到一个变量中 */const h2Style={fontSize:"18px",color:"red"}return(<div><h2 style={h2Style}>这是一个App组件</h2><p style={{fontSize:"18px",color:"red"}}>这是一段文字</p><div style={{color:this.state.textColor}}>这是一段动态变化的文字</div></div>)}
}

三元表达式

<div><h2 className={"title " + (isActive ? "active": "")}>内容</h2><h2 className={["title", (isActive ? "active": "")].join(" ")}>内容</h2>
</div>

引用module.css

import appStyle from "./style.module.css";
import common from "./common.module.css";
// 单个class
<h2 className={appStyle.title}>内容
</h2>
// 多个class
<div className={appStyle.box6 + ' ' + common.flexRow + ' ' + common.justifyBetween}>内容
</div>