vue项目css中修改子组件样式又不会造成全局污染的方法

我们在日常开发过程中，经常会遇到需要修改子组件样式的需求，这个时候我们通常会想到把样式写在不加scoped的style标签中：

但是使用了这种方法后，我们会发现从这个页面跳到另一个也使用了同样组件的页面后，另一个页面的样式会被同步修改，这样就不符合我们最初的预期了。
这个时候，我们又会想到另一个办法，就是在这个样式的外面包一层class，比如这个子组件有一个class为parent-style的div或别的容器，我们可以在这个class里面对子组件样式进行修改：

这样子组件的样式只会在这个div里生效，但是这也不是最优解，因为有可能不同的页面class的名字会有重复，这样还是有可能会造成样式污染。所以，下面提供一种比较好的方法：

以上方法里，我们使用了/deep/深度作用选择器，这样我们就可以把样式写在scoped里，保证避免了全局样式污染，又可以实现修改子组件默认样式的需求。

以上是自己在实践过程中总结的经验，可能不是最好的解决办法，大家互相学习！

本文地址：https://blog.csdn.net/qq_40610279/article/details/109246972