Vue 项目中样式穿透失效：common.css 文件中的 deep 为什么失灵？

发布日期： 2024-10-28 阅读量： 作者： 网络

在vue项目中的样式穿透难题：common.css文件中的deep为何失灵？

使用深度选择器deep是指定样式穿透特定组件边界的一种方法。但在Google 9.0版本中，开发者发现即使在common.css公共样式文件中使用deep，样式也不生效。

为什么deep穿透失效？

根据回答，问题可能出在common.css文件上，它可能未启用scoped作用域。scoped作用域是一种CSS功能，可将组件的样式隔离在该组件内，防止其他组件影响其样式。如果common.css中未启用scoped，则deep选择器将无法穿透到组件内部。

解决方法

既然知道了问题出处，解决方案就简单了：

<style scoped>
  /* ...common 样式 ... */
</style>

随便看看