第一种方法

原因：scoped
解决方法：去掉scoped

注意：此时该样式会污染全局样式，可以把它放在公共的css里面
为了不让所有的 el-input标签都是该样式，可以在HTML给改input加上一个类名，比如 modInput

第二种方法

这不去掉scoped 的情况下

在全局样式中覆盖，这种解法，有弊端，可能会污染全局样式。为了不污染全局样式，也可单独加个类名

比如在引用全局样式前引用element ui的样式

第三种

样式放到app.vue里面或者入口文件 index.vue ，样式就生效了为了不污染其他页面样式，可单独加个类名

第四种

使用深度作用选择器，可以通过vue-loader提供的新写法 vue-loader 写法如下（先安装，在使用）：

<style scoped lang="scss">

　　.form {

　　　　background-color: #fff;

　　　　/deep/ .list{

　　　　　　font-size: 18px;

　　　　}

　　}

</style>

sass注意要用 /deep/ ,而无法使用 >>> 这个符号。

通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。

第五种

<style scoped lang="scss">

.order-detail {

// put your local style here

}

</style>

<style>

.mint-button{

// put your global style here if you want to change the lib's style

}

</style>

scss文件中使用深度选择器/deep/报错 Expected selector解决方法

记得sass中使用/deep/没问题，但是在scss中使用/deep/报错了。

找到vue官网关于深度选择器是这样说的：

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

于是用 ::v-deep 就可以了

变成

style中加了scoped无法更改element ui样式解决办法的更多相关文章

eclipse中加放js文件报js语法错误解决办法
1) eclipse设置 window->preference-> JavaScript -> Validator->Errors/Warnings->E ...
es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法响应式图像弹窗细节微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性参数传递的四种形式
es6 Object.assign 目录一.基本用法二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值三.浏览器支持 ES6 O ...
Attribute "not-null" must be declared for element type "property"解决办法
Attribute "not-null" must be declared for element type "property"解决办法在hiberante ...
Eclipse中js文件修改后浏览器不能及时更新的解决办法
项目中js文件修改后浏览器不能及时更新的解决办法转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...
Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法
Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法如下面所示,同时导入这两个,会提示其中一个与另一个产生冲突. 1i ...
.NET在IE9中页面间URL传递中文变成乱码的解决办法
在.Net的项目中,鼠标点击查询按钮,转到查询页面,但URL中包含中文时,传到服务器端后,中文变成了乱码(只有IE9出现该问题). 尝试使用Server.UrlEncode()进行编码, ...
口碑订单，ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有
关于口碑订单,ERP本地加/退菜无法回流至手机端的解决办法-订单金额不统一erp本地加菜H5没有 1. 2. 3. PS:是正餐后付的务必要选择口碑后付完成以上设置即可
Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法
Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法先上个图.语法提示支持到 Microsoft Dynamics xRM API 8.2 也就是cr ...
electron-vue中使用iview 报错this. is readonly的解决办法
title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...
（tamcat控制台乱码）在idea中运行toncat后控制台出现乱码的情况解决办法（教程附图）。
详细教程: (tamcat控制台乱码)在idea中运行toncat后控制台出现乱码的情况解决办法(教程附图)._IT打工酱的博客-CSDN博客

随机推荐

HTTP身份认证
1.HTTP Basic认证用户每次发送请求的时候,在请求头中携带能通过认证的身份信息:Authorization: <username>:<password> 1.1 交互 ...
C#访问MySQL（一）：连接查询删除（查删）
前言: 通过C#连接访问MySQL:连接查询. 1.项目添加MySQL引用: 2.获取数据库一个满足条件的值: public static object GetSingle2(string SQLSt ...
SpringBoot写第一个接口
服务可以理解为一个接口,一个controller,一个做业务请求的新建一个HelloWorldController import org.springframework.boot.SpringApp ...
PHP5-8各版本特性详解
汇总 PHP5.1: autoload PDO MySQLi 类型约束 PHP5.2: JSON 支持 PHP5.3: 命名空间匿名函数闭包新增魔术方法__callStatic()和__invo ...
PTA1001 害死人不偿命的(3n+1)猜想 (15 分)
1001 害死人不偿命的(3n+1)猜想 (15 分) 卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复 ...
2、HTTP的消息格式
概念 HTTP协议 Hyper Text Transfer Protocol 超文本传输协议传输协议传输协议定义了客户端和服务器端通信时,发送数据的格式. 特点基于TCP/IP的高级协议默认端 ...
【原创】windows环境下Java串口编程
由于工作中遇到需要读取SBG Ellipse N系列的惯导模块数据,为了方便操作,我选择在Windows下进行串口开发.串口使用RS232. Ellipse-N RS232的引脚定义开始我尝试使用的 ...
关于 TabControl 获取被鼠标右键的 TabPage 而编写的函数...
关于 TabControl 获取被鼠标右键的 TabPage 而编写的函数... 功能: 1.不需考虑 SizeMode 情况 2.可以获取通过鼠标右键点击的 Tab 3.且顺便返回鼠标左键点的 T ...
centos7 启动Tomcat7时报错：The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found
INFO: The APR based Apache Tomcat Native library which allows optimal performance in production envi ...
Rename a Local and Remote Git Branch
Renaming Git Branch Follow the steps below to rename a Local and Remote Git Branch: 01 Start by swit ...

style中加了scoped无法更改element ui样式解决办法

scss文件中使用深度选择器/deep/报错 Expected selector解决方法

style中加了scoped无法更改element ui样式解决办法的更多相关文章

随机推荐

热门专题