最简单的方法
- 如果这个!important修饰的属性 是自己的写的，去掉这种写法，使用优先级的方式来写这个属性（
.outter .inner 的优先级就会比 。outter的优先级高）
复杂的方法：用魔法打败魔法
但是这个样式来自于全局css，无法修改怎么办
使用行内样式
- 行内样式的优先级一般比引入的css的优先级高
<el-input style= 'width:100px !important;'/>
- 有時候会生效，因为很多时候全局的css修饰里面的元素的内容，el-input只是最外层的壳子而已
- 这个时候你怎么在行内样式中写样式，在内层元素中都无法体现
使用deep和优先级的双重魔法
在元素上再加一个类名
<el-input
class="rangeInput"
/>
- 类名的层级更深
- 使用
::v-deep语法进行深层覆盖
<style scoped lang="scss">
::v-deep .rangeInput .el-input__inner{
width: 70px !important;
height: 30px !important;
}
</style>
