2021-07-20

vue项目引入第三方组件修改样式的问题

##通过第三方样式class类名修改样式

• 示例如下：

<template>
<div>
       <el-button >点击按钮</el-button>
 
</div>
 
</template>
 
<script>

</script>

<style >
    .el-button {
        color: #c9540f;
    }
</style>

注意：默认情况下el-button按钮文字颜色为 #606266;
但是通过上述class类名的改变会改变第三方组价样式，效果如下图所示：

上述通过修改第三方组件的class类名的方法有个缺点，在没有scoped属性的样式文件中会污染其他组件，从而不能达到局部样式的修改的目的。

##在scoped属性的style文件中修改第三方组件样式

##何为scoped

在vue文件的style标签上添加scoped属性，这样该样式文件的css样式只能作用于当前组件，其样式只能适用于当前组件元素。通过该属性可以使得组件之间的样式不会互相污染，实现了样式模块化。

##scoped实现原理

postCss给一个组件中的所有dom添加了一个独一无二的动态属性，然后给css选择器也添加了一个对应的属性，通过属性选择器将样式匹配到相应dom，这样使得样式只能作用于还有该属性的dom，也就是组件内dom。

##为何使用scoped属性

引用了第三方组件（npm install引入的elementui组件或者自定义组件等），在项目中有这样的需求，在组件内局部修改第三方组件的样式又不想去除scoped属性导致组件之间的样式污染，此时只能使用scoped属性。

##scoped属性使用注意事项（根据原理）

根据scoped原理，

• 父组件无scoped属性，子组件带有scoepd属性，此时，父组件不能设置子组件样式
• 父组件有scoped属性，子组件无，此时父组件也不能设置子组件样式
• 父子组件都有scoped属性，同理不能设置样式

##解决方法

• deep深度选择器
• 使用两个style标签，其中一个含有scoped属性，设置当前组件内的样式，另一个不含scoped属性，用于修改第三方组件样式。
• 添加class类名。