关于使用vue更改Element组件的label和其他相关样式方法

245 阅读1分钟

背景

最近在使用Element在写项目的时候遇到一些样式问题就是无法用Element自带的class和穿透符>>>input框的样式和label修改.

相信很多前端初学者遇到和我一样的问题.就是又想使用Element组件的便利又想植入自带的样让人非常难受.(难道真的鱼和熊掌不可兼得吗)

解决方法

刚开始去网上看了其他博主的博客其博客建议使用穿透运算符>>>但是实际上没什么用处,想了20分钟经过同事大佬的指点原来原因在于vue<style> 里的有一个自带的scoped属性 其属性的详情定义这里我就不过多赘述了,网上一大堆博客都有详情解析

所以只需要在当前的组件自带的 <style lang="scss" scoped>...<style/> 下新建一个<style></style>然后F12打开检查找到你想有修改的class名称然后再其个盒子上加一个独特的class 或者 id选择器 这样就不会影响到全局的Element组件的样式了 (因为不是吧stylescoped属性去掉了吗)