关于css:CSS变量在React中的应用

前言

当咱们在编写CSS文件的时候,很多的值是大量反复的,如果每次用到都应用具体的值的话,前期不批改还好,一旦波及批改,工作量会很大。

所以,实际中,为了保障可维护性,应用CSS变量成为必要。

能够将此纳入CSS的编码准则:

一个值只有呈现了不止一次,这个值就该当被定义为CSS变量

实现

同一文件

/* 定义 */
:root {
    --size: 16px;
}

/* 应用 */
div {
    width: var(--size); 
}

不同文件

/* index.css */

:root {
    --systemBlue-Light: #007AFF;
}
/* someComponent.module.css */

@import "../../index.css";

div {
    color: var(--systemBlue-Light);
}

不同文件间变量的调用使得在React中能够轻松实现CSS全局变量。

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据