在使用其他组件时,想自定义CSS,却无法对组件内部生效,此时,需要使用到CSS的深层穿透
style分为作用域样式和非作用域样式(全局样式),很简单,有scope的style标签<style lang="scss" scoped >
即作用域样式。
作用域样式:
在Vue中,作用域样式(Scoped CSS)是一种机制,用于确保组件样式仅在当前组件内起作用,不会影响到其他组件。这是通过在组件的元素上添加一个独特的、自动生成的属性(如
data-v-3d8fae0d
)来实现的。然后,这个属性也会被添加到你的CSS选择器中,以确保只有具有该属性的元素会被样式影响。如
el-button
组件有自己的内置样式。如果你尝试在父组件中使用普通CSS来更改它,可能不会起作用,因为El-UI的样式具有更高的优先级。当你需要覆盖Element UI(或任何其他库)的组件样式时,样式穿透是一种常用方法。在Vue中,你可以使用
/deep/
、::v-deep
或>>>
来进行样式穿透。
建议使用:::v-deep
- 尝试去除scope(明显不行,理解偏差,应该是要去el-button去除,而不是在自己引用的组件去除)
- 使用>>>进行样式穿透,没有生效
- 使用/deep/,直接运行报错
- 使用::v-deep,成功生效