运行环境 Runtime environment

操作系统 ： Windows10
IDE: JetBrains WebStorm 2020.2.4 x64
浏览器： Google Chrome 版本 67.0.3396.99（正式版本） （64 位）&& FireFox Developer Edition 版本63.0b4  (64位)
VueCli : 3

背景

修改Element-ui默认样式的时候发现没有效果，绑定了class也没有效果。

在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。

但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。

去掉scoped之后，样式可以覆盖。

却会污染全局样式，为了解决这个问题，vue-loader新增书写方式。

修改input标签样式

Vue文件中的HTML

1	<el-input class="search-input" clearable autosize v-model="formInline.kw" placeholder="搜索" prefix-icon="el-icon-search"></el-input>

Vue文件中的style

/* 更改element-UI input样式 */
.search-input >>> .el-input__inner {
    -webkit-appearance: none;
    background-color: rgba(153,204,255,0.1);
    border: 1px solid #99CCFF;
    /*border: 1px solid #99CCFF;*/
    background-image: none;
    border-radius: 4px;
    box-sizing: border-box;
    color: #f5e79e;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
.search-input >>> .el-input--prefix {
    padding-left: 30px;
}
/* 修改input 小图标颜色 */
.search-input >>> .el-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
    color: #f5e79e;
}
/* 修改input placeholder文字颜色 */
.search-input >>> .el-input__inner::-webkit-input-placeholder {
    color: #f5e79e;
}
.search-input >>> .el-input__inner:-moz-placeholder {
    color: #f5e79e;
}
.search-input >>> .el-input__inner:-ms-input-placeholder {
    color: #f5e79e;
}