zoukankan      html  css  js  c++  java
  • vue项目中element-ui等UI组件自定义样式不生效的解决

    在使用element-ui的时候虽然默认的样式已经能够满足很多的需求了,但是有总是有时候要加上些自定义的需求。不过,有的时候样式写上去了,按理说应该是没错的,但却是不生效呢。
    其实在vue项目中使用第三方框架的时候,都是可能会出现这个问题的,原因就是,vue中有scoped可以声明了样式是在组件范围内生效的。从而避免不同组件的样式污染,但大多数人写的都是带scoped的,所以样式的在scoped域内没生效。
    解决方法:

    一.去掉scoped

    直接把<style lang="less" scoped>中的scoped去掉就可以使样式生效,虽简单粗暴但却不是个很好的方法。

    二.使用深作用选择器

    css中使用>>>作深作用选择器

    
    <style scoped>
    .box >>> .el-input {
       60px;
    }
    </style>
    

    less中使用/deep/作深作用选择器

    <style lang="less" scoped>
    .avatar-uploader /deep/ .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
    }
    </style>
    

    三.使用全局样式

    定义一个全局样式,如global.css,然后在main.js中导入,如此这个样式就全局挂载了,在其中写的自定义样式也会生效。

  • 相关阅读:
    简单的运动框架——分享给初学者
    Python数据分析学习日志(1. 书单)
    mysql恢复数据参考
    window cmd 杀掉 java.exe 进程
    转载: Ajax关于readyState和status的讨论
    开发问题bug记录
    vue基础part10
    vue基础part9
    vue基础part(7-8)
    vue基础part(4-6)
  • 原文地址:https://www.cnblogs.com/flytree/p/14706828.html
Copyright © 2011-2022 走看看