[JavaScript知识库]2022.7.12 vue项目开发中针对style带scoped时如何更改外部组件样式

????????scoped 是一个布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。

作用：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。

原理：scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。
————————————————
版权声明：本文为CSDN博主「maidu_xbd」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/maidu_xbd/article/details/106361205

????????以elementUI为例，在使用 scoped 会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。可以使用下面的方法来解决。

????????（1）使用?>>>?可以穿透?scoped?属性，修改其他第三方组件的样式。

????????（2）使用 sass 或 less 的样式穿透?/deep/ 。

????????（3）使用两个?style?标签，一个带?scoped?属性，一个不带?scoped?属性，用来修改第三方组件的样式。

? ? ? ? 在本次项目开发中，我想修改的内容是引用的 element 组件库中的 el-tabs 的表头，大家引用这个组件的时候，一定碰到过字体过小的问题，我也是。然后为了调大字体，我查了很多网站，最后在博主?「maidu_xbd」的文章中找到以上三个方案，先后使用（1）（2）都没有用，最后发现方案（3）非常给力，这个方案是其他博主没有的，最后我也是使用方案（3）完美解决问题。在此，非常感谢?「maidu_xbd」提供的方案（3）！特发此文以表感谢和记录。

<style>
  .demo-tabs .el-tabs__item {
    margin-top: 20px;
    font-size: 30px;
  }
</style>

注：一定要记得用后代选择器。