在Vue中使用deep深度选择器修改element UI组件的样式

在项目当中我们常常会使用到 Element UI 组件库来进行快速开发，但是组件在引入之后它都会有官方默认的样式，有些情况我们需要修改它的样式。

方法一（不推荐）：使用class

为要修改的这个组件标签设置一个 class 类名，然后在 <style></style> 标签中设置样式。但要注意这种方式必须是在全局下才会生效，也就是说 <style></style> 标签中不能用 scoped 属性。

<style>

</style>

Tip：当 <style>  标签中有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不会影响其子组件。也就是实现了组件的私有化，不对全局造成样式污染。

需要注意的是，<style>标签如果没有 scopd 属性，可能会造成其他组件样式的错乱，所以该方式不推荐。

方法二：使用 deep 深度选择器

同样为要修改的这个组件标签设置一个 class 类名，并在 <style></style> 标签中设置样式，但是保留 <style> 标签的 scoped 属性；

<style scoped>

</style>

深度选择器的写法可以用 /deep/ 或者 >>> ；区别是 >>> 在 less 语法下不可用，/deep/ 则全部适用。

举例：修改 el-input 的样式；

<el-input class="txt" v-model="user" placeholder="请输入用户名">
  <i slot="suffix" style="display: flex;align-items: center;">
    <img
      class="icon"
      src="/static/login_new/login_icon_account_hig.png"
      alt=""/>
  </i>
 </el-input>

初始样式如下，输入框为直角；

接下来我们通过 CSS 用普通的类选择器来修改它为圆角；

<style scoped>
  .txt {
      border-radius: 2.64rem !important;
    }
</style>

样式不会生效；

使用深度选择器，格式如下；

<style scoped>
  .txt /deep/ .el-input__inner {
    border-radius: 2.64rem !important;
  }
</style>

样式修改成功；

到此这篇关于在Vue中如何修改element UI组件的样式（deep 深度选择器）的文章就介绍到这了,更多相关Vue修改element UI组件的样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中如何更改element-ui主题色

    目录 vue更改element-ui主题色 第一步 第二步 第三步 第四步 最后一步 使用element-ui自定义主题色 效果图 vue更改element-ui主题色 第一步 打开“elementUI官网“ 点击“自定义主题“, 找到“在线主题生成工具“ 第二步 点击“在线主题生成工具“,会进到一个新的页面,点击“切换主题色“,点完之后,会出现一个弹出层,可以自己选择颜色,也可以自己输入自己的主题色,选择好之后,点击“确定“,最后记得点击“切换“,你就会看见主题色已经已经切换了. 例如我设置的

  • 利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    目录 前言 实现过程 总结 前言 在前端项目开发中,经常会遇到省市县三级联动的下拉列表框组的问题,分享以下实现方法,以下内容为具体的实现过程: 实现过程 1.静态页面组件搭建:使用elementUI的form表单,并做一下基本的修改,得到以下结果: 2.然后是组件的数据配置: 表单的基本数据存放在form对象里面,至于省市县三个下拉菜单的数据,则以数组的形式存放,分别为provinceList[];cityList[];countyListp[]. 3.接下来处理重点数据:三级下拉菜单的联动:

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • vue中使用/deep/失效的解决方法

    1. 若是没有使用像less, sass等这样的css预处理器, 那么是只能使用 >>>这样的css深度选择器 <style scoped> .box >>> el.dialog { } </style> 2. 若是使用了css预处理器,则可以使用/deep/, 如果/deep/ 无效,则使用 ::v-deep <style scoped lang="scss"> .box /deep/ el.dialog { }

  • 如何在vue 中使用柱状图 并自修改配置

    1.在html文件导入echart <!-- 引入echarts --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> 2.在main.js上挂载echarts对象 Vue.prototype.$echarts = window.echarts // 使用时直接使用this.$echarts 3.页面结构 <templ

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

  • Vue中通过属性绑定为元素绑定style行内样式的实例代码

    1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h

  • Vue 中如何将函数作为 props 传递给组件的实现代码

    本文 GitHub https://github.com/qq44924588 ... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. Vue 新手经常问的一个常见问题.可以将字符串.数组.数字和对象作为props传递.但是你能把一个函数当作一个props来传递吗? 虽然可以将函数作为props传递,但这种方式不好.相反,Vue 有一个专门为解决这问题而设计的功能,接下来,我们来看看. 向组件传入函数 获

  • vue 无法覆盖vant的UI组件的样式问题

    vue 无法覆盖vant的UI组件的样式问题

    目录 无法覆盖vant的UI组件的样式 解决方法 使用样式穿透,强制覆盖Vant原样式 这个是组件的原样式 在浏览器可以看到 无法覆盖vant的UI组件的样式 有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法 使用深度选择器,将scoped样式中的选择器“深入”,即影响子组件 <style scoped>   .a >>> .b { /* ... */ } </style> 以

  • vue scoped与深度选择器deep的原理分析

    目录 scoped的作用 deep作用 总结 JS引入模块化概念后,变得更易于开发维护,但是css样式由于其特殊性,一直没有实现模块化,scoped的出现就是为了实现样式模块化,其本质利用属性选择器实现的一种伪模块化,并非真正意义上的模块化,但这已经让css模块化前进了一大步,要知道JS的模块化也是以这种方式开始的,比如早期的seajs,requirejs都是利用闭包封装达到模块化的效果,后来慢慢的出现了ES6的模块化规范import/export,说不定未来的某一天css也会出现真正的模块化,

  • 在vue中动态修改css其中一个属性值操作

    我就废话不多说了,大家还是直接看代码吧~ <template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> export default { data() { r

  • Vue中的作用域CSS和CSS模块的区别

    现代Web开发中的CSS离完美还差得远,这并不奇怪.现在,项目通常是相当的复杂的,而CSS样式又是全局性的,所以到最后总是极容易地发生样式冲突: 样式相互覆盖 或 隐式地级联到我们未考虑到的元素 . 为了减轻CSS存在的主要痛点,我们在项目中普遍采用 BEM 的方法来.不过这只能解决CSS问题中的一小部分. 对我们来说是幸运的,社区已经开发出了可以帮助我们更彻底地解决问题的解决方案.你可能已经听说过 CSS Modules. Styled Componetns. Glamorous或 JSS.这

随机推荐