网络日志

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全局变量。