React 中引入 CSS 高阶用法

一、是什么

组件式开发选择合适的css解决方案尤为重要

通常会遵循以下规则:

  • 可以编写局部css,不会随意污染其他组件内的原生;
  • 可以编写动态的css,可以获取当前组件的一些状态,根据状态的变化生成不同的css样式;
  • 支持所有的css特性:伪类、动画、媒体查询等;
  • 编写起来简洁方便、最好符合一贯的css风格特点

在这一方面,vue使用css起来更为简洁:

  • 通过 style 标签编写样式
  • scoped 属性决定编写的样式是否局部有效
  • lang 属性设置预处理器
  • 内联样式风格的方式来根据最新状态设置和改变css

而在react中,引入CSS就不如Vue方便简洁,其引入css的方式有很多种,各有利弊

二、方式

常见的CSS引入方式有以下:

  • 在组件内直接使用
  • 组件中引入 .css 文件
  • 组件中引入 .module.css 文件
  • CSS in JS

在组件内直接使用

直接在组件中书写css样式,通过style属性直接引入,如下:

import React from "react";//驼峰命名法声明属性
const div1 = {width: "300px",margin: "30px auto",backgroundColor: "#44014C",  minHeight: "200px",boxSizing: "border-box"
};export default const App = () => {constructor(props, context) {super(props);}render() {return (<div><div style={div1}>123</div><div style={{backgroundColor:"red"}}></div>);}
}

上面可以看到,css属性需要转换成驼峰写法

这种方式优点:

  • 内联样式, 样式之间不会有冲突
  • 可以动态获取当前state中的状态

缺点:

  • 写法上都需要使用驼峰标识
  • 某些样式没有提示
  • 大量的样式, 代码混乱
  • 某些样式无法编写(比如伪类/伪元素)

组件中引入css文件

css单独写在一个css文件中,然后在组件中直接引入

App.css文件:

.title {color: red;font-size: 20px;
}.desc {color: green;text-decoration: underline;
}

组件中引入:

import React, { PureComponent } from 'react';import Home from './Home';import './App.css';export default const App = () => {render() {return (<div className="app"><h2 className="title">我是App的标题</h2><p className="desc">我是App中的一段文字描述</p ><Home/></div>)}
}

这种方式存在不好的地方在于样式是全局生效,样式之间会互相影响

组件中引入 .module.css 文件

css文件作为一个模块引入,这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件

这种方式是webpack的方案,只需要配置webpack配置文件中modules:true即可

import React, { PureComponent } from 'react';import Home from './Home';// document.getElementById("root")
import styles from "./index.module.css";export default const App = () => {render() {return (<div className={styles.root}><h2 className="title">我是App的标题</h2><p className="desc">我是App中的一段文字描述</p ><Home/></div>)}
}

这种方式能够解决局部作用域问题,但也有一定的缺陷:

  • 引用的类名,不能使用连接符(.xxx-xx),在 JavaScript 中是不识别的
  • 所有的 className 都必须使用 {style.className} 的形式来编写
  • 不方便动态来修改某些样式,依然需要使用内联样式的方式;

CSS in JS

CSS-in-JS, 是指一种模式,其中CSSJavaScript生成而不是在外部文件中定义

此功能并不是 React 的一部分,而是由第三方库提供,例如:

  • styled-components
  • emotion
  • glamorous

下面主要看看styled-components的基本使用

本质是通过函数的调用,最终创建出一个组件:

  • 这个组件会被自动添加上一个不重复的class
  • styled-components会给该class添加相关的样式

基本使用如下:

创建一个style.js文件用于存放样式组件:

export const SelfLink = styled.div`height: 50px;border: 1px solid red;color: yellow;
`;export const SelfButton = styled.div`height: 150px;width: 150px;color: ${props => props.color};background-image: url(${props => props.src});background-size: 150px 150px;
`;

引入样式组件也很简单:

import React from "react";import { SelfLink, SelfButton } from "./style";export default const App = () =>{constructor(props, context) {super(props);}  render() {return (<div><SelfLink title="People's Republic of China">app.js</SelfLink><SelfButton color="palevioletred" style={{ color: "pink" }} src={fist}>SelfButton</SelfButton></div>);}
}

三、区别

通过上面四种样式的引入,可以看到:

  • 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱
  • 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠
  • 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写
  • 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等

至于使用react用哪种方案引入css,并没有一个绝对的答案,可以根据各自情况选择合适的方案


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/702215.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

conda常用命令详解

Conda 是一个功能强大的包管理器和环境管理器&#xff0c;用于安装、部署和管理软件包和其依赖关系。下面是一些常用的 Conda 命令及其详细解释&#xff1a; 创建环境&#xff1a; conda create --name myenv python3.8 创建一个名为 myenv 的环境&#xff0c;并指定 Python 版…

【NCom】:通过高温气相合成调节Pt-CeO2相互作用以提高晶格氧的还原性

摘要&#xff1a;在这项工作中&#xff0c;我们比较了通过两种方法制备的 Pt 单原子催化剂&#xff08;SAC&#xff09;的 CO 氧化性能&#xff1a;&#xff08;1&#xff09;传统的湿化学合成&#xff08;强静电吸附strong electrostatic adsorption–SEA&#xff09;&#xf…

音视频数字化(数字与模拟-电视)

上一篇文章【音视频数字化(数字与模拟-音频广播)】谈了音频的广播,这次我们聊电视系统,这是音频+视频的采集、传输、接收系统,相对比较复杂。 音频系统的广播是将声音转为电信号,再调制后发射出去,利用“共振”原理,收音机接收后解调,将音频信号还原再推动扬声器,我…

UI风格汇:极简主义(Minimalism),有人喜欢,有人唾弃。

Hello&#xff0c;我是大千UI工场&#xff0c;设计风格是我们新开辟的栏目&#xff0c;主要讲解各类UI风格特征、辨识方法、应用场景、运用方法等&#xff0c;本次带来的极简主义风格的解读&#xff0c;有设计需求&#xff0c;我们也可以接单。 一、什么是极简主义风格&#xf…

Linux 系统添加虚拟内存的方法

https://cloud.189.cn/t/6nqy2m3YnUN3 &#xff08;访问码&#xff1a;ic3i&#xff09; 云服务器 群晖NAS 切换到 root 模式 sudo su 或者 sudo -i #群晖/volume2 是你添加的硬盘挂载路径 不一定是 volume2 有可能是 volume1 #如果你只有1快硬盘 volume2 改成 volume1 …

深入剖析C语言中的段错误:从内存模型到实战调试全方位解析

引言 在C语言编程的世界里&#xff0c;段错误&#xff08;Segmentation Fault&#xff09;无疑是最常见的运行时错误之一。它源自程序对内存的非法访问&#xff0c;可能由于数组越界、野指针、悬垂指针、栈溢出等各种原因造成。本篇文章旨在带领读者深入探索C语言中的内存管理…

T-Dongle-S3开发笔记——移植LVGL

添加lvgl组件 idf.py add-dependency lvgl/lvgl>8.* 新建终端执行命令后出现了新的文件&#xff1a; 清除再编译后才会出现lvgl库 优化为本地组件 以上方式修改了组件文件内容重新编译后文件又会变回去。 所以我们要把lvgl变成本地组件 1、要把 idf_component.yml 文…

九 内存管理(2)

1.存储空间的分配与回收 页式存储管理分配内存空间以物理页面为单位:简单的内存分配表可以用一张“位示图”构成。位示图中的每一位与一个内存块对应&#xff0c;每一位的值可以是0或1&#xff0c;0表示对应的内存块为空闲&#xff0c;1表示已占用。在进行内存分配时&#xff0…

【其他】简易代码项目记录

1. KeypointDetection 1.1. CharPointDetection 识别字符中的俩个关键点。 1.2. Facial-keypoints-detection 用于检测人脸的68个关键点示例。 1.3. Hourglass-facekeypoints 使用基于论文Hourglass 的模型实现人体关键点检测。 1.4. Realtime-Action-Recognition containing:…

【Java万花筒】从开发到测试:嵌入式数据库与键值存储库全方位指南

嵌入式数据库与键值存储库&#xff1a;探索高效数据存储和访问的先进工具 前言 在当今数字化时代&#xff0c;数据的存储和访问是任何应用程序的关键需求。为了满足不同的需求&#xff0c;开发人员需要选择适合其应用场景的数据库和存储库。本文将介绍一些常用的嵌入式数据库…

opencv基础 python与c++

question: pip install -i https://pypi.tuna.tsinghua.edu.cn/simple matplotlib Opencv 一、读取图片 (1).imshow Mat imread(const string& filename, intflags1 );flags: enum { /* 8bit, color or not */CV_LOAD_IMAGE_UNCHANGED -1, /* 8bit, gray */CV_LOAD_I…

Vue3 exceljs库实现前端导入导出Excel

前言 需求场景 最近在开发项目时需要批量导入和导出Excel数据&#xff0c;在实现这个需求时&#xff0c;我们既可以在前端完成数据解析和文件生成工作&#xff0c;也可以通过前端发起导入以及导出请求后&#xff0c;后端实现解析文件流解析文件内容以及生成文件并提供下载链接…

中科大计网学习记录笔记(十五):可靠数据传输的原理

前前言&#xff1a;看过本节的朋友应该都知道本节长度长的吓人&#xff0c;但其实内容含量和之前的差不多&#xff0c;老师在本节课举的例子和解释比较多&#xff0c;所以大家坚持看完是一定可以理解透彻的。本节课大部分是在提出问题和解决问题&#xff0c;先明确出现的问题是…

python自动化管理和zabbix监控网络设备(有线网络配置部分)

目录 一、拓扑图 二、core-sw1 三、core-sw2 四、sum-sw1 五、sum-sw2 一、拓扑图 二、core-sw1 sys sysname core-sw1 vlan batch 10 20 30 40 50 60 100 vlan batch 200 210 220 230 240 250 stp region-configuration region-name huawei revision-level 1 instance…

学习python的第7天,她不再开放她的听歌榜单

我下午登录上小号&#xff0c;打开聊天消息看到了她的回复&#xff0c;我很开心兴奋&#xff0c;可是她不再开放她的听歌榜单了&#xff0c;我感觉得到&#xff0c;我要失恋了。 “因为当年电视上看没有王菲版本的” “行”。 “那你以后还会开放听歌榜单吗&#xff1f;”我…

Python入门必学:reverse()和reversed()的区别

Python入门必学&#xff1a;reverse()和reversed()的区别 &#x1f4c5;2024年02月25日 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程…

支付功能、支付平台、支持渠道如何测试?

作为一个支付平台&#xff0c;接入了快钱、易宝或直连银行等多家的渠道&#xff0c;内在的产品流程是自己的。业内有什么比较好的测试办法&#xff0c;来测试各渠道及其支持的银行通道呢&#xff1f; 作为产品&#xff0c;我自己办了十几张银行卡方便测试&#xff0c;但QA和开…

openGauss学习笔记-229 openGauss性能调优-系统调优-配置Ustore

文章目录 openGauss学习笔记-229 openGauss性能调优-系统调优-配置Ustore229.1 设计原理229.2 核心优势229.3 使用指导 openGauss学习笔记-229 openGauss性能调优-系统调优-配置Ustore Ustore存储引擎&#xff0c;又名In-place Update存储引擎&#xff08;原地更新&#xff09…

【前端素材】推荐优质医院后台管理系统I-Health平台模板(附源码)

一、需求分析 后台管理系统是一种用于管理和监控网站、应用程序或系统的在线工具。它通常是通过网页界面进行访问和操作&#xff0c;用于管理网站内容、用户权限、数据分析等。后台管理系统是网站或应用程序的控制中心&#xff0c;管理员可以通过后台系统进行各种管理和配置操…

java和python的区别

Java和Python是两种不同的编程语言&#xff0c;各自有其特点和用途。 语法差异&#xff1a;Java采用强类型语言&#xff0c;要求变量必须先声明后使用&#xff0c;并且要指定变量的数据类型。而Python是一种动态类型语言&#xff0c;变量可以直接赋值并且不需要指定数据类型。 …