添加独有样式

Question

问题描述

给输入框添加一个特有的样式

问题出现的环境背景及自己尝试过哪些方法

想去掉 display: block; 仅在这一个框框生效 其他不会有作用
尝试通过id #id

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

  <FormItem :label="$t('containerQty')" :prop="'containerQtyCopy'"
            :rules="[ {required: true,validator:isContainerQtyExist, trigger: 'change' }]">
    <InputNumber :min="0" v-model="containerQtyCopy" size="small"/>
  </FormItem>
  
.ivu-form-inline .ivu-form-item {
    display: block;
    margin-right: 10px;
    vertical-align: top;
  }
  

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

一般组件内，样式会加上scoped来限制作用范围，但是引用elementUI的话，组件内加上scoped会无法作用到UI组件。
我一般会给UI组件如FormItem加上一个class。然后再添加一个没有scoped的style
<style>
.class > .ivu-form-inline .ivu-form-item{
display:inline-block;
}
</style>
这样基本不会影响到其他组件的样式

Answer 2

你的意思是不是用border-box

Answer 3

或者新建一个css文件，专门用来写覆盖elementUI的样式，将其引入main.js文件就可以了，这种方式不用去除scoped，但是写样式的时候也最好在外面加个class类，防止所有样式都被覆盖