React18入门(第四篇)——React中的4种CSS使用方式,CSS Module、CSS-in-Js详解

文章目录

    • 一、普通方式使用CSS
        • 1.1 元素内联 style
        • 1.2 引入 CSS 文件
        • 1.3 类名插件 -- Classnames
        • 1.4 注意事项
    • 二、CSS Module
        • 2.1 普通 CSS 的问题
        • 2.2 CSS Module 的特点
        • 2.3 简单使用
    • 三、使用 sass
        • 3.1 sass 简介
        • 3.2 使用
    • 四、CSS-in-JS
        • 4.1 CSS-in-JS 简介
        • 4.2 CSS-in-JS 常用工具之 Styled-component
        • 4.3 CSS-in-Js 常用工具之 Styled-js 和 Emot
    • 五、总结

一、普通方式使用CSS

1.1 元素内联 style
  • 和 HTML 元素的 style 类似
  • 但必须是 JS 对象的写法,不能是字符串
  • 样式名要驼峰式写法,例如:fontSize
import React, { FC } from 'react'
import './QuestionCard.css'type PropsType = {id: stringisPublished: boolean
}
const QuestionCard: FC<PropsType> = props => {const { id, isPublished } = propsreturn (<div key={id} className="list-item">{isPublished ? (<span style={{ color: 'green', fontSize: '20px' }}>已发布</span>) : (<span>未发布</span>)}</div>)
}
export default QuestionCard
1.2 引入 CSS 文件
  • 使用 CSS 文件
  • JSX 使用 className
  • 可使用 clsx 或 classnames 做条件判断

定义
在这里插入图片描述
引入并使用
在这里插入图片描述

1.3 类名插件 – Classnames

classname地址:https://www.npmjs.com/package/classnames

安装

# via npm
npm install classnames# via Bower
bower install classnames# or Yarn (note that it will automatically save the package to your `dependencies` in `package.json`)
yarn add classnames

使用

var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'
1.4 注意事项

注:尽量不要用内联 style

  • 内联style 代码多,性能差、扩展性不好
  • 外链 CSS 文件可复用代码,可单纯缓存文件
  • PS: 这和 React 无关,学HMTL CSS 时就应该知道

二、CSS Module

2.1 普通 CSS 的问题
  • React 使用组件化开发,不适合
  • 多个组件,就需要多个 CSS 文件
  • 多个 CSS 文件就很容易造成 className 重复,产生覆盖。不好管理
  • CSS Modlule 就是解决方案之一
2.2 CSS Module 的特点
  • 每个 CSS 文件都当做单独的模块,命名格式: xxx.module.css
  • 为每个 className 增加后缀名,不让它们重复
  • Creat-React-App 原生支持 CSS Module
2.3 简单使用

2.3.1 定义样式

在这里插入图片描述
2.3.2 使用

在这里插入图片描述


三、使用 sass

3.1 sass 简介
  • CSS 语法比较原始,比如说,不能嵌套
  • 现代开发一般使用 less sass 等预处理语言
  • create-react-app 原生支持 Sass Module , 后缀改成 .scss 即可
3.2 使用

定义时,文件名用 .scss 后缀

**在这里插入图片描述**
使用示例:

在这里插入图片描述


四、CSS-in-JS

4.1 CSS-in-JS 简介
  • 是一种解决方案(而非工具名称),有好几个工具
  • 在 JS 中 写 CSS,带来极大的灵活性
  • 它和内联 style 完全不一样,也不会有内联 style 的问题
4.2 CSS-in-JS 常用工具之 Styled-component

官网:https://styled-components.com/

安装

npm install styled-components --save

使用

import React, { FC } from 'react'
import styled, { css } from 'styled-components'type ButtonPropsType = {primary?: boolean
}
const Button = styled.button`background: transparent;border-radius: 3px;border: 2px solid #bf4f74;color: #bf4f74;margin: 0 1em;padding: 0.25em 1em;${(props: ButtonPropsType) =>props.primary &&css`background: #bf4f74;color: white;`}
`
const Container = styled.div`text-align: center;
`const Demo: FC = () => {return (<><div><p>styleComponentsDemo</p><Container><Button>Normal Button</Button><Button primary>Primary Button</Button></Container></div></>)
}
export default Demo

实现效果:
在这里插入图片描述

4.3 CSS-in-Js 常用工具之 Styled-js 和 Emot

关于 Styled-js 和 Emotion

  • 在 Typescript 环境下需要扩展 JSX 属性,会带来一些麻烦
  • 优点:用 JS 写,有逻辑有变量,非常灵活
  • 缺点:JSX 和样式代码混在一起,代码较多;增加了编译成本
  • 试用场景:需要灵活变换 CSS 样式

五、总结

综上,具体使用何种 CSS 实现方法,需要根据项目而定。就目前,我接触的项目,可能会更倾向使用 CSS- Module

  • 第一:使用简单,学习成本低
  • 第二:性能更好,CSS-in-Js 会增加编译时间
  • 第三:我暂时接触的项目不需要灵活变换样式

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

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

相关文章

【JVM】对象内存布局

对象内存布局 文章目录 对象内存布局1. 对象的内存布局2. 对象标记(Mark Word)3. 类元信息(类型指针)4. 实例数据和对象填充 1. 对象的内存布局 在Hotspot虚拟机里&#xff0c;对象在堆内存中的存储布局可以划分为三个部分&#xff1a;对象头(Header)、实例数据(Instance Data…

SpringBoot面试题5:SpringBoot Starter的工作原理是什么?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:SpringBoot Starter的工作原理是什么? Spring Boot Starter 是一种便捷的方式来为 Spring Boot 应用程序引入一组特定功能的依赖项。它简化了项目…

SparkContext 与 SparkContext 之间的区别是什么

SparkContext 是 Spark 的入口点&#xff0c;它是所有 Spark 应用程序的主要接口&#xff0c;用于创建 RDD、累加器、广播变量等&#xff0c;并管理与 Spark 集群的连接。在一个 Spark 应用程序中只能有一个 SparkContext。 而 SparkSession 是 Spark 2.0 新增的 API&#xff0…

7-13 p070找出全部子串位置

7-13 p070找出全部子串位置 分数 5 作者 吴敏华 单位 首都师范大学 输入两个串s1,s2&#xff0c;找出s2在s1中所有出现的位置。 前后两个子串的出现不能重叠。例如’aa’在 aaaa 里出现的位置只有0,2 输入格式: 第一行是整数n 接下来有n行&#xff0c;每行两个不带空格的字符…

简述快速失败(fail-fast)和安全失败(fail-safe)的区别 ?

1&#xff1a;快速失败&#xff08;fail-fast&#xff09;: 在用迭代器遍历一个集合对象时&#xff0c;如果遍历过程中对集合对象的内容进行了修改&#xff08;增加、删除、修改&#xff09;&#xff0c;则会抛出Concurrent Modification Exception。 原理&#xff1a;迭代器在…

Kotlin注释

一、设置注释样式 按需配置 二、单行多行注释 fun main() {// 单行注释println("单行注释") //单行注释/** 多行注释* */println("多行注释") }

c++ fstream 文件追加模式

目录 c 覆盖模式&#xff1a; c 追加模式&#xff1a; c 覆盖模式&#xff1a; #include <fstream>int main() {std::ofstream file("example.txt");if (file.is_open()) {file << "Hello, World!";file.close();}return 0; }在这个例子中&a…

Hive引擎MR、Tez、Spark

Hive引擎包括&#xff1a;默认MR、Tez、Spark 不更换引擎hive默认的就是MR。 MapReduce&#xff1a;是一种编程模型&#xff0c;用于大规模数据集&#xff08;大于1TB&#xff09;的并行运算。 Hive on Spark&#xff1a;Hive既作为存储元数据又负责SQL的解析优化&#xff0…

python中matrix()矩阵和array()数组(待完善)

参考&#xff1a;python矩阵中matrix()和array()函数区别-CSDN博客 区别&#xff1a; 维度&#xff1a;ndarray可以是多维的&#xff0c;包括1D、2D、3D等&#xff0c;而matrix只能是2维的&#xff0c;也就是矩阵。数据类型&#xff1a;ndarray的数据类型可以不一致&#xf…

ELK + Filebeat 分布式日志管理平台部署

ELK Filebeat 分布式日志管理平台部署 1、前言1.1日志分析的作用1.2需要收集的日志1.3完整日志系统的基本特征 2、ELK概述2.1ELK简介2.2为什么要用ELK?2.3ELK的组件 3、ELK组件详解3.1Logstash3.1.1简介3.1.2Logstash命令常用选项3.1.3Logstash 的输入和输出流3.1.4Logstash配…

【LeetCode】34. 在排序数组中查找元素的第一个和最后一个位置

1 问题 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 1&a…

Qt入门之深入了解QWidget类

文章目录 一、QWidget简介一、QWidget的基本特性&#xff1a;1.1 绘图功能1.2 事件处理1.3布局管理 三、QWidget的子类1. QMainWindow&#xff08;主窗口类&#xff09;2. QPushButton&#xff08;按钮类&#xff09;&#xff1a;3. QLabel&#xff08;标签类&#xff09;&…

密码学三 btc 钱包 节点 挖矿 51%攻击 双花攻击

03-BTC-数据结构_哔哩哔哩_bilibili 哈希指针并解释 比特币的每个区块都包含一个区块头和区块体两部分。 在区块头中,有一个字段是用于存储前一个区块的哈希值,我们把这个存储前一个区块哈希值的字段称为“哈希指针”。 这个哈希指针的作用是将本区块指向前一个区块,连接起整…

CentOS有IP地址,连接不上Xshell或使用Xshell时突然断开

问题原因&#xff1a;未在电脑主机的网络中进行IP地址配置 解决办法&#xff1a; 1.打开控制面板&#xff0c;选择‘网络与共享中心’ 2.选择“更改适配器设置” 3.右键点击以太网3“属性” 4.选择协议版本4&#xff0c;点击属性 5.IP地址填写CentOS的IP地址&#xff1a;192.…

Epoch、批量大小、迭代次数

梯度下降 它是 机器学习中使用的迭代 优化算法&#xff0c;用于找到最佳结果&#xff08;曲线的最小值&#xff09;。 坡度 是指 斜坡的倾斜度或倾斜度 梯度下降有一个称为 学习率的参数。 正如您在上图&#xff08;左&#xff09;中看到的&#xff0c;最初步长较大&#…

2013年408真题复盘

紫色标记是认为有一定的思维难度或重点总结 红色标记是这次刷真题做错的 记录自己对题目的一些想法与联系&#xff0c;可能并不太关注题目本身。 分数用时 选择部分10/17 72/8034min大题部分总分 摘自知乎老哥&#xff1a;“我做历年真题时&#xff0c;绝大部分是130~139&#…

SpringBoot基础详解

目录 SpringBoot自动配置 基于条件的自动配置 调整自动配置的顺序 纷杂的SpringBoot Starter 手写简单spring-boot-starter示例 SpringBoot自动配置 用一句话说自动配置&#xff1a;EnableAutoConfiguration借助SpringFactoriesLoader将标准了Configuration的JavaConfig类…

微信小程序中如何使用fontawesome6的免费图标

一、官网下载fontawesome6 Download Font Awesome Free or Pro | Font Awesome 二、使用transfer编码成Base64 transfer打开官网&#xff1a;Online font-face generator — Transfonter 首先先把刚刚下载的fontawesome6解压&#xff0c;将文件夹中的字体上传&#xff08;点…

java入参为对象的(非基本数据类型int/float等)修改属性会影响原始对象

ApiOperation("登录接口")RequestMapping(value "/login", method RequestMethod.POST)public Result<JSONObject> login(RequestBody SysLoginModel sysLoginModel){Result<JSONObject> result new Result<JSONObject>();// by wang…

禁用和开启笔记本电脑的键盘功能,最快的方式

笔记本键盘通常较小&#xff0c;按键很不方便&#xff0c;当我们外接了键盘时就不需要再使用自带的键盘了&#xff0c;而且午睡的时候&#xff0c;总是担心碰到笔记本的键盘&#xff0c;可能会删掉我们的代码什么的&#xff0c;所以就想着怎么禁用掉&#xff0c;下面是操作步骤…