在js中修改less文件内样式

title: "在js中修改less文件内样式"
date: 2023-04-21T22:51:58+08:00
tags: ["React", "less", "JavaScript"]
categories: ["前端篇"]

在项目中使用使用进度条时遇到了一点问题,根据需求进度条的百分比需要在条内显示,但是当完成度太低时由于进度条背景和百分比值都是接近的颜色,所以此时无法显示进度值,这个时候需要根据完成度大小来进行判断,动态给进度值设置颜色.
先将实现后的效果图展示出来

如上图所示 ,第一幅图几乎看不出来进度值,此时我们稍作改变

// index.tsx 改变前进度条
// proportion 状态值,通过判断状态来改变进度条
<p className={styles.rate}>
  <Progress
    strokeLinecap="butt"
    strokeWidth={16}
    percent={proportion}
  />
</p>

// index.tsx 改变后进度条
// proportion 状态值,通过判断状态来改变进度条
<p className={styles.rate}>
  <Progress
    strokeLinecap="butt"
    style={
      proportion > 5
        ? { color: "var(--progress-text-col, white)" }
        : { color: "var(--progress-text-col, black)" }
    }
    strokeWidth={16}
    percent={proportion}
  />
</p>

在less中

/* :global 用来覆盖默认样式 */
.rate {
  width: 300px;
  & :global(.ant-progress-inner) {
    padding: 0;
  }
  & :global(.ant-progress-text) {
    position: absolute;
    color: var(--progress-text-col);
    font-size: 12px;
  }
}

接下来介绍一下var在css中的作用

var()是一个css函数,可以插入一个自定义属性,这个自定义属性我们可以在全局复用

var()支持我们传入两个参数,第一个参数是要替换的自定义属性名,第二个参数是可选的,用作回退值,当一个参数无效时,就会使用第二个参数,我们可以利用这一点来给某一个样式的设置值.

当我们的第二个参数是一个时,可以看作给第一个参数赋值,因为第一个参数不起作用就会回退到第二个参数,在上述的less代码中,因为没有在其他位置定义--progress-text-col,所以--progress-text-col这个参数无效回退到white或者black,此时color就是white或者black.

值得注意的是,以上述情景为例,当在其他位置定义了--progress-text-col,此时在less中--progress-text-col就会生效,index.tsx内的color赋值操作就会不起作用