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类名。