我们平时在使用Elementui Antdesing这些UI库时，难免会碰到使用deep强行侵入式去修改组件内部样式的情况；比如下列代码，我们需要把ant的分页样式进行高度自定义，就得使用deep去修改；这种实现方式确实能够达到我们的目的，但在开发时确总觉得不太合适：1、他属于强行入侵组件内部去修改，虽然不会有大问题，但总觉得这种取巧方式有点不可取。2、每次写deep时需要手动检查DOM元素进行编辑，UI文档中并不会有相关API文档；为了解决心中的这两个结症，趁最近写组件的机会探索了下CSS 的var函数，发现他可以很好的解决以上问题。利用var函数我们可以具体解决组件开发的以下问题：1、组件样式自定义可以更加个性化2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开；3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找4、不会侵入式的改动组件内部样式5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep;看下面需求,是如何利用css var函数实现一个可自定义大小，颜色，以及子元素样式的卡片上代码

//Card.vue

这时候我们在API文档则可明确规定样式定制属性了：组件使用方式：

//demo.vue<script>...</script>

以上就是一个基本的组件实现；还种情况我们在使用UI库时也会碰到需要使用Props传过来计算的参数，比如下列代码：

这种我们也可以把这些全提出来使用style属性。让样式与js参数彻底隔离

//demo.vue  <script setup>    let hoverStyle = ref({});    const handleHover = () => {        hoverStyle.value = { "--bg": "#f0f", "--width": "180px" };    };</script>

我们在组件内

JS可以使用props.style获取到设置的值,css中可以使用calc变量与var结合去计算你想要的值

//card.vue<script setup>    const $props = defineProps({        img: {            type: String,            default: "",        },        desc: {            type: String,            default: "",        },        style: {            type: Object,            default: () => ({}),        },    });    //假如你在js中需要用到宽度    let width = computed(() => {        return parseInt($props.style["--width"] || 150);    });</script>

但是这种实现有命名空间的问题所以需要稍微注意下变量命名，最好加独有的命名规则。防止变量覆盖；

//比如这样.ch-card{    --ch-card-width:100px;    --ch-card-height:100px;}

总结下这种方案的优缺点：优点1、组件样式自定义可以更加个性化2、现在很多组件库实现一些样式控制还是依靠props传参的形式，这种var函数结合Style可完全避免props传参的情况，把样式跟props区分开；3、在组件文档中可明确定制样式属性API；使组件样式可以跟Props属性一样以传参概念去进行高度定制，在使用组件样式时不需要像使用deep一样打开f12去一层一层的找4、不会侵入式的改动组件内部样式5、这个方案与deep互不排斥，如果开放的样式API不够用还是可以继续使用deep;缺点：1、开发组件时会工作量会增大，但是磨刀不误砍柴功2、命名空间问题导致命名会有点长。欢迎分享更好的解决方案。