// .van-field__body 父盒子
.test {
  :deep(.van-field__body) {
    .van-field__control {
      font-size: 17px;
    }
  }
}

穿透 box-inner 的样式

.box ::v-deep .box-inner {
  background-color: pink;
}

vue2.0 样式穿透

<style>
.test/deep/{
    margin-top:10px
}
</style>

绑定样式

setup() {
    return {
        themeColor: `'linear-gradient(225deg, rgba(0, 215, 252, 1) 0%, rgba(66, 133, 244, 1) 100%)'`
    }
}

<style lang='scss'>
.test{
    background:v-bind(themeColor);
}
</style>

1.深度选择器

<style scoped>
.a :deep(.b) {
  /* 要穿透的样式代码 */
}
</style>

2.插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：
<style scoped>
:slotted(div) {
  color: red;
}
</style>

3.全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现：
<style scoped>
:global(.red) {
  color: red;
}
</style>

4.支持 CSS Modules

1、 默认以$style 对象暴露给组件；
<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

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

2、可以自定义注入module名称
<template>
  <p :class="classes.red">red</p>
</template>

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

5.动态 CSS

单文件组件的 <style> 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：
<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

6.与 setup 一同使用

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