elementUI默认样式修改不成功的问题
问题:
login.vue中引入<style lang="postcss" src="./login.css" scoped></style>
login.css中
.el-input__inner {
background-color: rgba(255,255,255,.2);
}
设置el-input的样式没有效果。
解决方法:
是因为scoped的原因。去掉scoped就可以显示样式。
但此时会污染全局样式,所以将该样式放在控制全局样式的文件里(比如app.css)。
为了不让所有的el-input都变透明,所以给需要透明的el-input添加一个类lucencyInput
.lucencyInput .el-input__inner {
background-color: rgba(255,255,255,.2);
}
原因:
组件的scoped会给写的每一个样式添加一个唯一的过滤器[data-],对应的模板也会加一个data-属性,这样就保证了样式只对当前组件有效。
这样我们写的.el-input__inner会带一个过滤器,但是element组件中却没有,自然样式就不生效了。
ps:还有一种情况,像el-button这种,写在scoped的样式是生效的。因为el-button属于第一层,也会被当前组件加一个data-,
而上面el-input__inner是属于el-input里面的类,当前组件只能给第一层el-input加一个data-,但是里层的相当于是子组件内部的东西了,是不会加data-的。
(这里比较绕,可以打开浏览器,自己调试一下就明白了了)
elementUI默认样式修改不成功的问题的更多相关文章
- element-ui默认样式修改
来自 :https://blog.csdn.net/wangguoyu1996/article/details/81394707 侵删 我们在使用element-ui的时候经常会遇到需要修改组件默认样 ...
- angular -——组件样式修改不成功
angular组件样式修改不成功! 自己定义的css可以成功 组件的不行 style在模板字符串里 直接没有 class 是显示的 但是样式不生效 加上面 即可,为什么?我也不太清楚.有知道答案的请回 ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
- HTML复选框checkbox默认样式修改
此方法可以将复选框的默认样式替换成任意样式.如图: 未选择: 选择时: 思路:将复选框隐藏,利用lebal元素的焦点传递特性,用lebal的样式替代复选框. 代码如下: <!DOCTYPE ht ...
- 修改elementui默认样式
转发连接:https://blog.csdn.net/weixin_41557291/article/details/80606525 在需要更改的组件里新增一个style标签[重点:不要加scope ...
- elementui+vue修改elementUi默认样式不生效
重写,覆盖都不行, ! important 也不行. 原因是 在style标签加了 scoped 的原因.
- iOS中默认样式修改-b
项目中有大量的UITableView都需要显示sectionHeader.iOS中默认sessionHeader上的textLabel样式跟设计图不符. 按照我们之前的解决方案,是在每个UITable ...
- input时间表单默认样式修改(input[type="date"])
一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...
- input选择框默认样式修改
input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...
随机推荐
- Mybaties保存后自动获取主键ID
<!-- 插入记录 --> <insert id="saveTvTypeBatch" useGeneratedKeys="true" keyP ...
- ABAP术语-Database Rollback
Database Rollback 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/24/1051238.html Operation tha ...
- vue 数组数据更新或者对象数据更新 但是页面没有同步问题
1,使用set函数来设置数据. 2,你可以通过 $forceUpdate 来做这件事.在数据赋值之后 就直接调用 this.$forceUpdata()
- EpiiServer 更快捷更方便的php+nginx环境定制化方案
EpiiServer是什么 更快捷更方便的php+nginx多应用部署环境. github仓库首页 https://github.com/epaii/epii-server gitee仓库 https ...
- MongoDB学习(1)--安装,基本curd操作
知识点: 1-MongoDB 安装,启动和卸载 2-基本概念 3-基本的增删改查操作(CURD) 来回顾总结一把学习的mongodb,如果有javascript基础,学习"芒果DB" ...
- 转自 阿里云技术文档的 centos + PHP 环境 搭建
产品亮点 1.基于阿里云CentOS7.2镜像 2.采用yum方式安装,软件安装均为默认目录,未作任何修改. 3.采用经典LAMP组合,拓展性强,资源丰富,解决方案较多 4.附带PhpMyadmin和 ...
- js获取浏览器内容宽高(小计)
<SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可见区域宽:"+ d ...
- 基于Ubuntu Server 16.04 LTS版本安装和部署Django之(二):Apache安装和配置
基于Ubuntu Server 16.04 LTS版本安装和部署Django之(一):安装Python3-pip和Django 基于Ubuntu Server 16.04 LTS版本安装和部署Djan ...
- EIP权限工作流平台总结-1总体说明
预览地址:www.eipflow.com (1) 权限工作流:www.demo.eipflow.com/Account/Login (2) 基础权限版:www.auth.eipflow.com/A ...
- bootstrap重新设计checkbox样式
文章采集于: https://www.cnblogs.com/GumpYan/p/7845445.html#undefined 在原文基础上修改了勾勾的内容,直接采用bootstrap字体库.修改了横 ...