解决ElementUI自定义CSS样式不生效的问题_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

例如有一个输入框

<el-input
        ref="mySearch"
        class="mySearch"
        size="small"
        placeholder="请输入内容"
        suffix-icon="el-icon-search"
        v-model="input1">
</el-input>

如果没有加自定义样式则输入框大概是这样的

在这里插入图片描述

我希望是这样的

在这里插入图片描述

通过谷歌浏览器的开发者工具,找到对应样式的类名为.el-input__inner
但发现再html中前面的el-input标签解析成了这个,其中mySearch是自己添加上去的,因此我们可以找到mySearch的元素,需要修改的是子元素类名是.el-input__inner

在这里插入图片描述

在这里插入图片描述

如果之间通过css的选择器选择子元素则不能作用到子内部的元素
下面使用了stylus语法的写法
下面是错误的写法:

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch .el-input__inner
        border-radius 20px
</style>

让其生效的方法

方案一:需要中间加一个/deep/才能

<style scoped lang="stylus" rel="stylessheet/stylus">
    .mySearch /deep/ .el-input__inner
        border-radius 20px
</style>

方案二:去掉scoped,这种方式能达到效果但不建议使用!

总的来说之所以不能生效就是这个scope导致作用范围不能作用到内部的子组件,解决问题的最后方法是通过加/deep/使其能作用到子组件中

到此这篇关于ElementUI自定义CSS样式不生效的解决方案的文章就介绍到这了,更多相关ElementUI样式不生效内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • html外部样式表如何引入css样式
  • 详解css3中常用的样式【基本文本和字体样式】
  • 编程式处理css样式的示例代码
  • css 选择所有子元素添加样式的方法
  • css常用样式之绘制双箭头的示例代码
  • 详解中文字体在css样式中font-family对应的英文名称
  • css实现鼠标悬停改变其他标签样式的示例代码
  • element ui css样式整体修改,有什么较好的解决方案
  • html+css问题,修改css样式后效果没生效
  • 在css样式中存在element.style,不知道怎样才能找...
  • 为什么制作网页,css样式不起作用
  • html 中 css样式表里,属性没有生效
  • 使用element是不是不用写css
  • 用element-ui 样式报错 Unexpected character 事什...
  • div内嵌的div设置的css样式不起作用,为什么?没有...
  • elementui的默认样式怎么修改
  • 如何修改Element-UI的input样式
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程elementui样式css常用样式之绘制双箭头的示例代码详解中文字体在css样式中font-family对应的英文名称css实现鼠标悬停改变其他标签样式的示例代码css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字纯css免费让网站拥有暗黑模式切换功能的实现代码css 带搜索导航栏的示例代码一文教你玩转css 组合选择器纯css实现的三种通知栏滚动效果css实现tiktok文字抖动效果示例一文教你玩转css border(边框)css 实现各种 loading 效果附带解析过程如何通过 display:olck/none 完成一个菜单栏300 多行css代码搞定微信 8.0 的炸裂特效css之粘性sticky布局实现题头定位在顶部的方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved