使用 CSS 的一些技巧

scoped  在 style 中写 scoped 可以起到隔绝样式的作用，这样就避免了项目中的样式污染，起到了 css 模块化的作用。

:deep()  在使用 UI 框架时 ，有时需求的样式会和UI有些出入，当你修改某个组件的样式不生效时，可以尝试用它来起到样式穿透的作用，让你自己写的样式生效。

:slotted()  在子组件可以修改父组件中插槽模板的样式

父组件

<template>
  <div>
    <A>
      <template #default>
        <div>
          111111
          <img src="./assets/1.jpg" alt="" class="img">
        </div>
      </template>
    </A>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}
</style>

子组件

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
:slotted(.img) {
    width: 400px;
    height: 500px;
    object-fit: cover;
}
</style>

:global()  全局样式，可以使你写的样式应用到全局

动态css

第一种形式

<template>
  <div>
    <text>1111</text>
  </div>
</template>

<script setup lang="ts">
const color = ref('red')

</script>

<style scoped lang="less">
text {
  color: v-bind(color)
}
</style>

第二种形式

<template>
  <div>
    <text>1111</text>
  </div>
</template>

<script setup lang="ts">
const bgc = ref({
  color: 'green'
})
</script>

<style scoped lang="less">
text {
  color: v-bind('bgc.color')
}
</style>