vue3 style

scoped

1.作用于当前组件,postcss转换，
2.子组件的根元素上面设置style会起作用

选择器

深度选择器(改变子组件的style)

当前组件选择器 :deep(子组件选择器)

插槽选择器(改变slot中的style)

:slotted(插槽里面的选择器)

全局选择器(将style应用到全局)

:global()

css 使用提示

尽量减少挂载样式的数量，用class或id，减少使用元素选择器等

使用module

<template>
  <p :class="classes.red">
    This should be red
  </p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

module不命名时 模版用$style获取style样式

setup引入module

注入的类可以通过 useCssModule API 在 setup() 和

动态 CSS

可以用data中定义或setup引出的变量通过v-bind对style进行绑定

<style>
.text {
  color: v-bind(color);
}
</style>