问题:在app.vue中引入公共样式mainStyle.css文件对input的width已做设置,在page.vue页面对el-input的width需单独设置宽度,设置完后不生效,生效的为ainStyle.css文件对input的width,对应page.vue页面代码如下
<template>
<div>
<el-input class="groupName" placeholder="请输入" auto-complete="off"></el-input>
</div>
</template>
<style scoped>
.groupName .el-input__inner {
width:100% !important;
}
</style>
原因:相对应el-input来说,page.vue为其父组件,使用 scoped
后,父组件的样式将不会渗透到子组件中。
解决方法:使用深度作用选择器>>>或/deep/
操作符,代码如下
<style scoped lang="scss">
/* 新建分组-输入框样式 */
.groupName >>> .el-input__inner {
width:100% !important;
}
</style>
注意:有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
操作符取而代之——这是一个 >>>
的别名,同样可以正常工作。