element-ui组件默认css样式修改

516 阅读1分钟

1.使用全局统一覆盖

针对一些通用的、样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class

/* 覆盖原有的样式 */
.el-menu.el-menu--horizontal{
    border-bottom: 0px;
}

优点:

全局覆盖,省事

使用scss更加灵活

可以随时删除样式的覆盖

缺点:

局部修改时需要重新覆盖

所有被修改的组件样式都是一样的

2.在.vue文件中修改

这种方法是在vue文件中新加一个style标签

用于修改一些特定的组件样式,但不会全局应用

比如,某个.vue文件中需要一个特别定制的table组件,而其它文件则需要用原来的样式

这样,我们最好的处理方式就是在.vue文件中新加一个style标签

这种方式的好处在于你可以动态的绑定某些class