Vuetify 1.5.x版本中如何移除<v-textarea>的上边距？

问题原因 #

我之前在Vuetify 1.5版本里也碰到过一模一样的问题，其实是组件自带样式的优先级搞的鬼：当你给<v-textarea>加上outline属性时，Vuetify会给组件对应的.v-textarea--outline类默认设置了margin-top值，而且这个内置样式的优先级比Vuetify自带的mt-0工具类更高，所以直接加class="mt-0"根本覆盖不掉这个上边距。

解决办法 #

这里有几个实用的方案，按推荐优先级排序：

1. 用内联样式直接强制覆盖
   内联样式的优先级是最高的，直接给组件加style属性就能搞定，简单粗暴：

   <v-textarea 
     v-model="test" 
     outline 
     type="text" 
     color="primary" 
     v-validate="{required: true}" 
     data-vv-name="test" 
     :error-messages="errors.collect('test')"
     style="margin-top: 0;"
   ></v-textarea>
   

2. 用深度选择器修改局部样式（适合scoped场景）
   如果你的组件用了<style scoped>，可以通过Vue的深度选择器穿透组件的样式隔离，精准修改目标组件的上边距：

   /* 在组件的<style scoped>标签里添加 */
   ::v-deep .v-textarea--outline {
     margin-top: 0;
   }
   

   注：Vuetify 1.5也支持用/deep/替代::v-deep，两者效果完全一致。

3. 全局样式覆盖（不推荐，谨慎使用）
   如果你需要全局范围内移除所有带outline的<v-textarea>上边距，可以在全局样式文件里添加：

   .v-textarea--outline {
     margin-top: 0 !important;
   }
   

   提醒：尽量少用!important，除非没有其他办法，不然容易引发全局样式冲突。

内容的提问来源于stack exchange，提问作者amu03