React融合css

news/2024/11/14 11:16:21/

单纯使用tsx文件生成的页面比较单一,可以考虑结合css进行使用,需要说明的是,本人水平有限,仅对接触过的几种方式进行说明

内联样式

内联样式也有多种写法,此处仅列举两种比较简单的写法

写法一

import React from "react";
const in_background = {backgroundColor: 'green'
}
const Test: React.FC = () => {return (<div><h4 style={in_background}>H4_HELLO</h4></div>);
}
export default Test;

结果

写法二

import React from "react";
const Test: React.FC = () => {return (<div><h1 style={{background: "red"}}>H1_HELLO</h1></div>);
}
export default Test;

结果

全局CSS类

内联样式在页面的一侧,可以在全局样式中将其居中

Global.css

.cus_background {background-color: #646cff;
}
body{background-color: sandybrown;display: flex;justify-content: center;align-items: center;
}

Test.tsx

import React from "react";
import './Global.css';
const Test: React.FC = () => {return (<div><h2 className={"cus_background"}>H2_HELLO</h2></div>);
}
export default Test;

结果

模块化CSS类

Test.module.css

.cus_module_background {background-color: aqua;
}
body{background-color: #1a1a1a;display: flex;justify-content: center;align-items: center;
}

Test.tsx

import React from "react";
import my_styles from './Test.module.css';
const Test: React.FC = () => {return (<div><h3 className={my_styles.cus_module_background}>H3_HELLO</h3></div>);
}
export default Test;

结果

组合测试

这里有一个问题,如果全局CSS类和模块化CSS类同时引入并定义了body,那么哪个生效呢

代码

Test.tsx

import React from "react";
import './Global.css';
import my_styles from './Test.module.css';
const in_background = {backgroundColor: 'green'
}
const Test: React.FC = () => {return (<div style={{backgroundColor: "orange"}}><h1 style={{background: "red"}}>H1_HELLO</h1><h2 className={"cus_background"}>H2_HELLO</h2><h3 className={my_styles.cus_module_background}>H3_HELLO</h3><h4 style={in_background}>H4_HELLO</h4></div>);
}
export default Test;

查看结果,发现是模块化生效

那么是否说明模块化优先呢,我们不妨再做一个测试,调整全局与模块化的引入顺序,会发现全局生效

相同的属性,后引入的会生效,那么不同的属性呢

当前生效的是全局,改变下模块化的代码

.cus_module_background {background-color: aqua;
}
body{background-color: #1a1a1a;display: flex;justify-content: center;align-items: center;transition: background-color 5s;
}body:hover {background-color: red; /* 鼠标悬停时变为橙色 */
}

结果

会发现模块化中差异的属性是生效的

优先级验证

个人理论基础有限,有兴趣的可以自行搜索下CSS的特异性和后来居上原则

参考资料

[1].react融合css代码


http://www.ppmy.cn/news/1546905.html

相关文章

OAuth 2.0 鉴权调试的方法

原文链接&#xff1a;配置 OAuth 2.0 并直接获取访问令牌

【设计模式】行为型模式(一):模板方法模式、观察者模式

行为型模式&#xff08;一&#xff09;&#xff1a;模板方法模式、观察者模式 1.模板方法模式&#xff08;Template&#xff09;1.1 主要特点1.2 适用场景1.3 示例1.3.1 抽象类定义模板方法1.3.2 子类实现具体步骤1.3.3 客户端1.3.4 结果输出 2.观察者模式&#xff08;Observer…

k8s-service、endpoints、pod之间是怎么进行网络互通的

k8s-service、endpoints、pod之间是怎么进行网络互通的 1、service2、endpoints3、service、endpoints、pod通信图4、不同服务pod内部间访问 1、service 在K8S中&#xff0c;Service是一种抽象&#xff0c;定义了一组Pod的逻辑集合和访问这些Pod的策略。首先&#xff0c;我们需…

Unity3D 制作MMORPG 3D地图编辑器详解

前言 在MMORPG&#xff08;大型多人在线角色扮演游戏&#xff09;开发中&#xff0c;地图编辑器是一个至关重要的工具。它不仅能帮助开发者快速创建游戏世界&#xff0c;还能设计各种地形和场景。本文将详细介绍如何使用Unity3D制作一个3D地图编辑器&#xff0c;包括技术详解和…

图论基本术语

图论算法 —— 图论概述-CSDN博客 理论基础 —— 图_依附于顶点v是什么意思-CSDN博客 理论基础 —— 图 —— 图的存储结构_十字链表和链式前向星-CSDN博客 语雀版本 概括&#xff1a;图是计算机中常用的一种存储结构&#xff0c;图论是数学的一个分支&#xff0c;他以图为…

JAVA-队列

一、队列的概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out) 入队列&#xff1a;进行插入操作的一端称为队尾&#xff08;Tail/Rear&#xff09; 出队列&#xff1a…

GitLab 如何跨版本升级?

本分分享 GitLab 跨版本升级的一些注意事项。 众所周知&#xff0c;GitLab 的升级必须要严格遵循升级路径&#xff0c;否则就会出现问题&#xff0c;导致升级失败。因此&#xff0c;在 GitLab 升级之前需要做好两件事情&#xff1a; 当前版本的确认升级路径的确认 极狐GitLa…

[基础] 003 使用github提交作业

注意 : 这篇文章是水分子HOH社区举办的move共学营中提交作业的方法 项目地址 : https://github.com/move-cn/letsmove/ 第一步 : fork 项目 fork项目就是将官方的仓库同步一份到自己github上,但需要注意的是这个同步不是实时同步,每次自己拉取代码之前需要手动同步一下 create…