React融合css

server/2024/11/14 1:58:23/

单纯使用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的特异性和后来居上原则