如何动态修改第三方组件库的内部样式

以分页器为例

上述是一个简单的elementUI的带有背景的分页器、页面渲染、代码、以及样式
假如我们想要修改页码的的背景、选中状态的背景应该怎么做呢？很简单

<template>
  <div>
     <el-pagination
		  background
		  class="myPagination"
		  layout="prev, pager, next"
		  :total="1000">
		</el-pagination>
  </div>

</template>

<script>
</script>

<style lang="less" scoped>
::v-deep .myPagination{
  .el-pager {
    .number{
      background: #61879db5;
    }
    .active {
      background: #0f64af;
    }
  }
}
</style>

只需要在css中进行deep深度绑定，就可以修改其展示颜色，如下所示

动态修改样式

上述我们静态修改样式实现了，如果把这个组件作为一个低代码的组件库，并且给用户提供操作面板让其自己控制样式，如下

这种情况下，思考怎么动态修改背景与选中状态的背景色呢？

1. 实现思路

   1、可以在js的script进行操作的变量
   2、变量传入到css的style中
   

2. 实现示例
   a、为最外侧的组件绑定:style 计算属性
   b、使用:style 通过–numberbgdColor的形式往css中传递变量

   <template>
     <div>
        <el-pagination
   		  background
   		  class="myPagination"
   		  layout="prev, pager, next"
   		  :style="paginationStyle"
   		  :total="1000">
   		</el-pagination>
     </div>
   </template>
   <script>
   export default {
   	data() {
   	    return {
   	    	bgdColor:'#61879db5'
   	 	}	
   	 },
   	computed: {
   	    paginationStyle() {
   	      return {
   	        '--numberbgdColor': bgdColor
   	      }
   	    }
    	 }
   }
   </script>
   

   
   css变量使用var(–numberbgdColor)即可捕获到js中传递过来的变量numberbgdColor

   	<style lang="less" scoped>
   		::v-deep .myPagination{
   		  .el-pager {
   		    .number{
   		      background: var(--numberbgdColor);
   		    }
   		    .active {
   		    }
   		  }
   		}
   	</style>
   

   
   我们发现页码的背景颜色就被我们传递的变量替代了，然后我们就可以通过对data中的bgdColor值改变，来改变组件内部页码的背景颜色了

思路解析

1、css有一个伪类:root,在 CSS 中，:root 是一个特殊的伪类，表示文档的根元素（通常是 元素）。我们通常在 :root 中定义全局变量，因为它是作用域最大的位置。其定义格式如下：

/* 定义 CSS 变量 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

我们通过对分页器组件绑定:style仿照root的形式传递全局变量

2、css中一样存在作用域
var() 函数是用于访问和使用已经定义的 CSS 变量的关键函数，分层级去寻找变量，在此不做具体介绍

总结

通过在 Vue 中使用 :style 动态绑定样式和 CSS 变量，通过 Vue 的计算属性来确保样式随数据变化自动更新，从而提供更好的用户体验和更清晰的代码结构。