在Vue中如何修改element UI组件的样式(deep 深度选择器)

举报
敬 之 发表于 2022/04/16 02:10:32 2022/04/16
【摘要】         在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式。 方法一(不推荐):使用class     &nbs...

        在项目当中我们常常会使用到 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>

 样式修改成功;

文章来源: majinjian.blog.csdn.net,作者:Developer 小马,版权归原作者所有,如需转载,请联系作者。

原文链接:majinjian.blog.csdn.net/article/details/122112671

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。