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
全局变量。
转载自:https://segmentfault.com/a/1190000042279152