在React中引用CSS方式及写法大全

引用方式

第一种：内联方式

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

优点: 只生效于当前组件
缺点: 可能产生大量重复代码

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

第二种：在组件引用 [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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

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

.App{
  background-color: #282c34;
  .header{
    min-height: 100vh;
    color: white;
  }
}
1
2
3
4
5
6
7

第四种：在组件中引用[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}>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

写法

三种内联写法

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>
		)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

三元表达式

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

引用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>
1
2
3
4
5
6
7
8
9
10