type
status
date
slug
summary
tags
category
icon
password
在《学习Vue3第十一节:scoped和BEM框架》里,讲过了样式穿透
:deep()
选择器1.插槽选择器 :slotted()
默认情况下,在子组件修改父组件通过插槽传过来的内容的样式,是不会起作用的,因为作用域样式不会影响到
<slot></slot>
渲染出来的内容。这时就可以使用插槽选择器:slotted()
案例:
在子组件里定义一个插槽
在父组件里引入子组件,并通过插槽传给子组件一个div
在子组件里,使用
:slotted()
直接修改父组件传递的class
名为a
的div样式页面效果:
2.全局选择器 :global()
以前我们想加入全局样式,通常都是新建一个不加
scoped
的<style>
标签,现在我们可以直接使用:global()
来更优雅地解决3.动态 CSS
单文件组件的
<style>
标签可以通过v-bind
这一CSS
函数,将CSS
的值关联到动态的组件状态上如果
textColor
声明的是对象,就需要在v-bind
里加引号CSS module
自定义注入名称,多个样式可以用数组:
与组合式 API 一同使用:
注入的类可以通过
useCssModule
API
在 setup()
和 <script setup>
中使用。对于使用了自定义注入名称的 <style module>
模块,useCssModule
接收一个对应的 module attribute
值作为第一个参数,使用场景一般用于TSX 和 render 函数 居多- 作者:衔蝉
- 链接:https://xianchan.ah.cn/article/vue3-25
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章