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

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

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

---

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

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

---

解决方法 && 思路：

1. 一个自定义新建的.vue组件（内部提前定义好覆写的样式）,在main.js中全局引入，然后在目标页面import引入组件；
2. 一个自定义新建的.css文件（内部提前定义好覆写的样式）,在main.js中全局引入即可；【实测OK推荐】
3. 找到源码文件：
   ------ 在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
   

4. 和第3种方法差不多：只不过是F12查看类的css规则，然后绑定自定义类名，有时候也能实现覆写样式；
5. 添加优先级属性 !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;}
   
   

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

---

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