React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React 引用CSS

React中引用CSS方式及写法大全(三种方式)

作者:我只会写Bug啊

在React中引用CSS的方法有多种,可以根据个人的喜好和项目的需求来选择,本文主要介绍了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;

第二种:在组件引用 [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>

到此这篇关于React中引用CSS方式及写法大全(三种方式)的文章就介绍到这了,更多相关React 引用CSS内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文