vue scoped后无法修改elementUI组件样式

问题：在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/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。