如何在`scoped`不污染组件样式的前提下，实现el-input组件样式覆盖？

讲述：关于在使用elementUI开发项目中，需要结合需求修改样式的问题?

踩了个坑，无论怎么修改样式的权重，都无法覆写element-ui的el-input组件的边框样式。
唯一能看效果的就是在浏览器端F12之后，修改样式。

万言：只要是找到了问题，不怕再去找解决办法。

解决方法 && 思路：

一个自定义新建的.vue组件（内部提前定义好覆写的样式）,在main.js中全局引入，然后在目标页面import引入组件；
一个自定义新建的.css文件（内部提前定义好覆写的样式）,在main.js中全局引入即可；【实测OK推荐】
找到源码文件：
------ 在element-ui的源码文件：…/element-ui/2.6.1/theme-chalk/index.css中，通过自定义类绑定组件的类，实现组件调用样式；
注意：前提是你的index.css是本地的文件，而不是cdn引入的
比如：下面的cdn引入方式：此方法就不可以
```
 https://cdn.bootcss.com/element-ui/2.6.1/theme-chalk/index.css
```
和第3种方法差不多：只不过是F12查看类的css规则，然后绑定自定义类名，有时候也能实现覆写样式；

添加优先级属性 !importnat 原则 （代码如下举例）**
【注意：此例style未设置scoped，仍然生效】**

<p class="rb-tit mt10 sex-box">性别  <el-dropdown @command="sexHandleCommand"><span class="el-dropdown-link" id="sex-dropdown">不限<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="0">不限</el-dropdown-item><el-dropdown-item command="M">男</el-dropdown-item><el-dropdown-item command="F">女</el-dropdown-item></el-dropdown-menu></el-dropdown>
</p> <br/>/* 条件查询 下拉框 */
.selet.el-form-item .el-form-item__content{margin-left: 0!important;}

待续（欢迎更多技术谈论留言）

以上就是关于“ 如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？” 的全部内容。

如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？相关推荐

html input选择框样式修改,关于type=file的input框样式修改小结
关于type="file"的input是啥? 这个是啥我觉得没必要再说了,反正大家都知道,然后在现在有各种手机的时代,还可以通过直接拍照的方式来上传,反正比以前好玩多了. 上传按钮 ...
input[type='radio'] 自定义样式___通过label标签重置input[radio]样式
每次都要重新写一遍,麻烦,所以直接写一个完整小栗子,可直接复制粘贴再修改一哈哈,这样就省事多了. 先给label标签绑定input,如此便可以,点击input或者label中包裹的文字时,都可以被选中 ...
你知道如何修改单选框、复选框、下拉框的默认样式吗
介绍 HTML 原生的单选框.复选框元素样式在各个浏览器上面由用户代理默认设置样式,如果在页面上应用了其他颜色或主题时,我们通常也相应的更改这些输入框或按钮的颜色或背景,否则会出现颜色与背景或主题不融 ...
React编写input组件传参共用onChange
之前写页面上的input比较少,所以没有单提出来一个组件,今天研究了下input组件,但共用一个onChange的问题卡了一会儿,查了下发现几个比较好的方法,分享下: 方法一 Input组件 let ...
修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
微信小程序：伪input组件的样式
前言项目中为保持界面设计的一致,需要用view模拟input的样式. 开始我们可以通过placeholder-class为input设置holder文字的样式,然后将此样式应用在view上,来看看 ...
复习微信小程序input组件和wxss样式写法。
Input组件输入框组件(参考小程序文档)写的相当清楚.. <view><text>请输入第一个数字</text><input type='number'v ...
Bootstrap5使用bootstrapValidator完成表单验证（包括解决样式、图标不显示及其他组件表单验证出问题解决方案）
以下都为个人实践. CND引入bootstrap5及bootstrapValidator文件 bootstrap5 <link href="https://cdn.jsdelivr.n ...
如何在 Cell 组件/插件中添加下拉树形控件
引言用友华表Cell控件在提供强大的报表功能的同时,在关键细节也是十分突出,为开发者进一步缩短开发周期和最终用户的完美需求提供了有效有利的平台.下面的例子提供了VB语言对实现美观实用的下拉树形控件 ...

如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？

如何在`scoped`不污染组件样式的前提下，实现el-input组件样式覆盖？

解决方法 && 思路：

如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？相关推荐

最新文章

热门文章