在vue项目中的样式穿透难题:common.css文件中的deep为何失灵?
使用深度选择器deep是指定样式穿透特定组件边界的一种方法。但在Google 9.0版本中,开发者发现即使在common.css公共样式文件中使用deep,样式也不生效。
为什么deep穿透失效?
根据回答,问题可能出在common.css文件上,它可能未启用scoped作用域。scoped作用域是一种css功能,可将组件的样式隔离在该组件内,防止其他组件影响其样式。如果common.css中未启用scoped,则deep选择器将无法穿透到组件内部。
解决方法
立即学习“前端免费学习笔记(深入)”;
既然知道了问题出处,解决方案就简单了:
- 在common.css上启用scoped属性:
<style scoped> /* ...common 样式 ... */ </style>
登录后复制
- 不再使用deep选择器:
common.css中的样式现在将自动应用于所有组件,无需再使用deep选择器。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容