React融合css

单纯使用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代码](https://gitee.com/learnhistory/front-chatroom "react融合css代码")

相关推荐
喝拿铁写前端8 分钟前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED14 分钟前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪35 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程1 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常1 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师2 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚2 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧2 小时前
HTML字符实体和转义字符串
前端·html