vue修改组件的默认样式

修改组件的默认样式,首先认识到一点,代码层次的类,以及最终渲染的html页面中的类,只有意识到这一点才能真正修改组件的样式.

先解释一下什么代码层次的**类，**代码层次的类指的是将在使用element组件 或者vant组件的时候，比如el-button 或者 van-button的组件的时候，这个时候我们可以通过 .el-button 或者 .van-button 类选择器获取到这个标签的类从而进行修改.但是通过这种方式获取到只是最外层的标签,因为封装的组件内部有很多标签,即使进行修改的话 也只是修改的最外层的标签的效果.比如 van-button组件  实际结构如下:

<button class="van-button">
    <div class="van-button__content">按钮</div>
</button>

.van-button只能定位到最外层的button 并不能定位到内部的div 所以很多时候 通过.van-button进行样式修改的时候 是不生效的 

那什么html层次的类呢 ? 如上面的van-button按钮来说 在实际html页面中生成的效果就是这样的,如果我们想要找到按钮的文字进行修改的话 那实际的操作就是定位到van-button__content这个类  然后在进行样式的修改.

如果说进行要是修改的话,有一个两个属性就必须要提及一下.

首先是scope ,这个属性应用在style标签上,他的作用就是style样式只是作用在本组件中,对其他组件的样式并不生效,这个比较常用,如果不加scope的话 可以使用less或者sass语法进行嵌套着设置,这样在内部的修改的样式也不容易作用在别的组件身上.比如在.vue文件中设置最外层的div的类是 about ,通过嵌套的格式 如下,只要别的组件内部没有about,也可以进行限制

.about {
    xxxx
}

其次还有一个属性叫做::v-deep  这个我称作是深度选择器,他的作用是在设置scope的style的标签里面 可以使用这个定位到组件内部进行修改样式.

以上的方式只是选择器层次的定位吧,意思就是可以帮我们定位到组件内部的标签,从而改变组件的样式,但是修改样式的时候,还有一个需要考虑,就是css的权重的问题, 你可以定位到标签,但是css不生效,这个时候你就要考虑权重问题 是不是被默认的组件样式给覆盖了 .小编比较偷懒,但凡遇到直接!important ,有好的方式可以留言告知一下.