VUE-element-UI修改内置样式


在VUE中使用element-UI有的时候会带有很多的默认css样式,很难修改,因为大部分都是内置样式,权重比较高,这种基本上有以下几种方法

1.额外给当前元素加上id,class进行样式覆盖修改

2.权重不够!important来补,但是慎用,对于性能很不友好

这种都是在当前开发工具上能看到该元素的方式,但是有的时候在开发工具你看到的可能只是<el-button>,控制台却打印出来很多层element生成的元素,你无法在开发工具选中,这个时候

1.在控制台找到该元素的class名

2.在你的样式表下加一个新的style标签注意不要有scope(因为VUE为了防止组件之间样式污染,会自带样式私有化,这会导致你的样式不会生效与当前开发工具当前页面之外的元素,也就是element自动生成的元素)

3.在这个style标签里用这个class名书写样式进行覆盖,就OK了


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM