动态修改elmentUI元素样式---CSS 变量 var() 函数

之前修改elementUI组件样式是在css文件里/deep/就行，如下所示：

&::v-deep {
        .el-collapse{
            border-top: none  !important;
        }
        .el-collapse-item__wrap{
            background-color: #2a4850;
            border-bottom:none !important;
            color:#29B1CC;
            &::v-deep{
                .el-collapse-item__content{
                    color:#29B1CC;
                }
            }
        }
    }

但是今天要修改的其样式是需要动态修改，我公司产品是有通过js文件在前端页面展示其css对应属性，所以用户可以自己去配置样式。就是把我们要用到的css样式动态写到js中，然后再引入到html样式中即可。可是想了半天都没想到elementUI的要怎么修改，最后在网上找到了，试了一下没想到是ok的，大家可以看一下：

css文件：

&::v-deep {
        .el-collapse-item__header {
            background-color: #0d475d;
            //动态渲染
            color: var(--textarea-color);
            font-size: var(--textarea-size);
            font-weight: var(--textarea-weight);
        }
    }

html文件：

<el-collapse-item :style="{ '--textarea-color': `${titleColor}`,
                            '--textarea-size':`${titleFontSize}`,
                            '--textarea-weight':`${titleFontWeight}`
                  v-for="(key, index) in propertyTable" 
                  :title="key.title" 
                  :name="index" 
                  :key="key.name"
}">
</el-collapse-item>

js文件导出你定义的对应的值即可

这里再细说一下var()函数吧：

大家可以看这个博主的介绍：

CSS 变量 var() 函数_Serena_tz的博客-CSDN博客_css变量var