【无标题】Vue3想在scss中想使用动态的变量

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)就是那个可以使用的变量了。