我要评论概念
主要是用于修改很多 vue 常用的组件库（element, vant, antdesigin），虽然配好了样式但是还是需要更改其他的样式， 因为添加了 scoped 实现 css 模块化
就需要用到 样式穿透 ，更改组件的样式
scoped 的原理
vue 中的 scoped 通过在 dom结构以及 css 样式上加唯一不重复的标记: data-v-hash 的方式，以保证唯一（而这个工作是由过 postcss 转译实现的），达到 样式私有化模块化的目的。
简单示例代码如下
<template>
<div>
<el-input placeholder="please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ipt {
width: 300px;
margin: 100px 400px;
}
</style>总结一下 scoped 三条渲染规则
1.给 html 的 dom 节点加一个不重复 data 属性(形如：data-v-123)来表示他的唯一性
2. 在每个 css 选择器的末尾（编译后的生成的 css 语句）加一个当前组件的 data 属性选择器（如 [data-v-123]）来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性
注意：
<template>
<div>
<el-input placeholder="please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
.el-input__inner {
background-color: red;
}
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论