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, { Component } from "react";const div1 = {width: "300px",margin: "30px auto",backgroundColor: "#44014C",  //驼峰法minHeight: "200px",boxSizing: "border-box"
};class Test extends Component {constructor(props, context) {super(props);}render() {return (<div><div style={div1}>123</div><div style={{backgroundColor:"red"}}></div>);}
}export default Test;

上面可以看到,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 class App extends PureComponent {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';import './App.module.css';export default class App extends PureComponent {render() {return (<div className="app"><h2 className="title">我是App的标题</h2><p className="desc">我是App中的一段文字描述</p ><Home/></div>)}
}

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

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

CSS in JS

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

此功能并不是 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, { Component } from "react";import { SelfLink, SelfButton } from "./style";class Test extends Component {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>);}
}export default Test;

三、区别

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

  • 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性,但是大量的演示编写容易导致代码混乱

  • 组件中引入 .css 文件符合我们日常的编写习惯,但是作用域是全局的,样式之间会层叠

  • 引入.module.css 文件能够解决局部作用域问题,但是不方便动态修改样式,需要使用内联的方式进行样式的编写

  • 通过css in js 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义、修改状态等

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

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

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

相关文章

SpringCloud-Sentinel

一、介绍 &#xff08;1&#xff09;提供界面配置配置服务限流、服务降级、服务熔断 &#xff08;2&#xff09;SentinelResource的blockHandler只处理后台配置的异常&#xff0c;运行时异常fallBack处理&#xff0c;且资源名为value时才生效&#xff0c;走兜底方法 二、安装…

Anaconda创建新的虚拟环境及Jupyter Notebok中、PyCharm中环境的使用

Anaconda创建新的虚拟环境 在windows开始菜单中【徽标键】&#xff0c;查找Anaconda文件夹并打开【Anaconda Prompt】 查看已有虚拟环境 conda env list1.创建 conda create --name mytest python3.7 # 创建一个名称为mytest&#xff0c;python版本为3.7的虚拟环境输入【…

济南双软认定办理流程,软件企业认定申报材料

具体流程及需要材料&#xff1a; 第一步&#xff1a;软件着作权 材料&#xff1a;源代码前后各30页&#xff0c;软件说明书&#xff0c;企业营业执照公章、软件着作权的申请表。统一提交中国版权中心?? 第二步&#xff1a;软件测评 材料&#xff1a;软件操作手册、说明书…

clion本地调试nginx-1.22.1

1 概述 nginx是一个多进程模型的流量代理软件&#xff0c;在本地调试时需要将它设置为单进程模式。 2 下载nginx源码 mkdir -p /opt/third-party cd /opt/third-party wget http://nginx.org/download/nginx-1.22.1.tar.gz tar xf nginx-1.22.1.tar.gz ls /opt/third-party…

Android振动器(Vibrator)

1.获取权限 振动器权限仅需静态申请 在清单文件中声明&#xff1a;android.permission.VIBRATE <uses-permission android:name"android.permission.VIBRATE"/> 2.振动器的使用 //获取系统服务-振动器 Vibrator vibrator (Vibrator) getSystemService(VIB…

Redis的持久化策略:RDB与AOF(面试题详解)

文章来源&#xff1a;Redis持久化的两种方式&#xff1a;RDB与AOF&#xff08;详解&#xff09;&#xff0c;订正了一些错误 一、概述&#xff1a; RDB和AOF持久化的由来&#xff1f; 因为Redis中的数据是基于内存的&#xff0c;所以如果出现服务器断电或者服务器宕机&#xf…

Java SOAP 调用 C# 的WebService

Java SOAP 调用 C# 的WebService&#xff0c;C# 的WebService方法的创建可以参考上一篇文章。IntelliJ IDEA Community Edition 2021.2.3的idea64.exe新建项目&#xff0c;导入需要的jar&#xff0c;代码如下&#xff1a; import org.apache.axis.client.Service; import org.…

教育行业如何通过互联网推广品牌?媒介盒子告诉你

近年来&#xff0c;国民对教育的重视程度日趋上升&#xff0c;教育行业也日益壮大&#xff0c;数字化时代的来临也使教育行业推广品牌的方式更加多样化&#xff0c;接下来媒介盒子就和大家分享&#xff1a;教育行业如何通过互联网推广品牌。 一、 发布软文进行品牌推广 数字…

js到vue到react的发展

介绍&#xff1a; JavaScript是一种基于对象和事件驱动的编程语言&#xff0c;在Web开发中占据着重要的地位。随着前端技术的不断发展&#xff0c;出现了一系列的框架和库&#xff0c;Vue和React是其中较为知名的两个。 Vue是一个轻量级的JavaScript框架&#xff0c;由尤雨溪…

项目部署Linux一般步骤

1、最小化安装centos7-环境准备 安装epel-release 安装epel-release&#xff0c;因为有些rpm包在官方库中找不到。前提是保证可以联网 yum install -y epel-release 修改IP net-tools net-tool&#xff1a;工具包集合&#xff0c;包含ifconfig等命令 yum install -y net-…

Android 使用 ToneGenerator 实现按键提示音

Android 使用 ToneGenerator 实现按键提示音 外部链接简单效果功能简单实现工具类线程池工具主页面简单实现 外部链接 DTMF原理 处理音频输出的变化 ToneGenerator API 简单效果 功能简单实现 工具类 package com.xg.practise.utilimport android.app.Activity import and…

2023年【安全生产监管人员】考试题及安全生产监管人员考试内容

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【安全生产监管人员】考试题及安全生产监管人员考试内容&#xff0c;包含安全生产监管人员考试题答案和解析及安全生产监管人员考试内容练习。安全生产模拟考试一点通结合国家安全生产监管人员考试最新大纲及安…

(完全解决)如何输入一个图的邻接矩阵(每两个点的亲密度矩阵affinity),然后使用sklearn进行谱聚类

文章目录 背景输入点直接输入邻接矩阵 背景 网上倒是有一些关于使用sklearn进行谱聚类的教程&#xff0c;但是这些教程的输入都是一些点的集合&#xff0c;然后根据谱聚类的原理&#xff0c;其会每两个点计算一次亲密度&#xff08;可以认为两个点距离越大&#xff0c;亲密度越…

Python学习8

前言&#xff1a;相信看到这篇文章的小伙伴都或多或少有一些编程基础&#xff0c;懂得一些linux的基本命令了吧&#xff0c;本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。 文章使用到的的工具 Python&#xff1a;一种编程语言&…

unity save load系统 快速搭建

我的最终目标是快读建立一个关卡数据自动读入储存功能&#xff1a; 1. 每个关卡有自己的编号&#xff0c;如果没有自定义该关卡&#xff0c;则读取默认编号的初始布局&#xff0c;如果有自定义该关卡&#xff0c;则读取新定义的关卡。 2.在游戏中如果对布局做出了更改&#x…

浅谈现代建筑照明中的智能照明控制系统

安科瑞 华楠 摘要&#xff1a;随着我国经济、技术的不断发展&#xff0c;科学技术在建筑中的应用不断地扩大&#xff0c;人们对物质文化和精神生活水平有了更高的追求&#xff0c;就当今建筑的发展来说&#xff0c;智能化已经成为主流&#xff0c;涵盖多个方面&#xff0c;包括…

JavaScript 原型链污染

1.prototype是一个类的属性&#xff0c;所有类对象在实例化的时候将会拥有prototype中的属性和方法2.一个对象的proto属性&#xff0c;指向这个对象所在的类的prototype属性1.每个构造函数(constructor)都有一个原型对象(prototype)2.对象的proto属性&#xff0c;指向类的原型对…

MES生产管理系统与供应链协同管理

MES生产管理系统在制造业中发挥着越来越重要的作用&#xff0c;它与供应链管理密切相关&#xff0c;对于提高供应链的协同和优化有着重要的意义。本文将探讨MES管理系统与供应链管理之间的关系&#xff0c;包括实时数据共享、生产计划协调和供应链效率提升等方面。 MES系统能够…

RabbitMQ 消息模型

参考 ​​​​​​【RabbitMQ】RabbitMQ架构模型_rabbitmq结构模型-CSDN博客 之前的学习都只是知道名字&#xff0c;但并没有真正的理解&#xff0c;每次看还是不懂&#xff0c;所以今日理解透 &#xff01; RabbitMQ 收发消息过程如下&#xff1a; 首先从消费者开始&#xff1…

OpenCV视频车流量识别详解与实践

视频车流量识别基本思想是使用背景消去算法将运动物体从图片中提取出来&#xff0c;消除噪声识别运动物体轮廓&#xff0c;最后&#xff0c;在固定区域统计筛选出来符合条件的轮廓。 基于统计背景模型的视频运动目标检测技术&#xff1a; 背景获取&#xff1a;需要在场景存在…