Vue3想在css中想使用动态的变量

首先在组件中定义  :style="{ '--custom-style-color': customStyle.color }",customStyle.color就是那个传过来的变量，也可以是自定义的-color 值

const props = defineProps({customStyle: {type: Object,default: () => ({}),},
});const color = ref('#00ff44');

然后在scss中使用：

 .el-select-dropdown__item.selected {color: var(--custom-style-color) !important; // 使用 CSS 变量}

var(--custom-style-color)就是那个可以使用的变量了。