Vue 使用 UI 组件库 Vuetify 修改样式

从群友那儿学来了一个前端词汇 穿透

原因是我使用 Vuetify 的 文本框 v-text-field

使用了 dense 前/后置 图标就不能 垂直居中

先来一个没有 dense

<v-text-field
  outlined
  solo
  single-line
  clearable
  prepend-inner-icon="mdi-text"
  hide-details="auto"
  label="请输入"
></v-text-field>

效果图如下:

看着感觉有点“胖”。。。

这时候 前置图标 还是居中的

这时候加上 dense

<v-text-field
  dense
  outlined
  solo
  single-line
  clearable
  prepend-inner-icon="mdi-text"
  hide-details="auto"
  label="请输入"
></v-text-field>

再看效果图:

明显图标下移了!看着相当难受啊!

这时候可以看下页面元素的样式,这就是没能居中的原因

然后找到 vuetify.css 发现是这么定义的,这。。太为难我了。。

这时候嘛,作为一个小菜鸟,第一反应,当然是直接修改成 margin-top: 0;

<style scoped>
.v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
.v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
  margin-top: 0;
}
<style>

但是,这时候,

刷新了页面,

清理了浏览器缓存,

再看这个元素的样式,发现!

还是 margin-top: 8px;

这时候不慌,我在 style 标签里加了 scoped 表示仅作用在当前的 vue 组件,

如果删掉 scoped 呢,的确是可以让 前置图标 居中,图就不放了(懒)。

但是,就真的只有这种方式?

当然不,最终我放了个大招,面向群友编程

于是就学到一个新词 穿透

Vue 官网 也是有提到过的,新知识点 get。

这时候赶紧改起来

<style scoped>
>>> .v-text-field.v-input--dense .v-input__prepend-inner .v-input__icon > .v-icon,
>>> .v-text-field.v-input--dense .v-input__append-inner .v-input__icon > .v-icon {
  margin-top: 0;
}
<style>

再看效果图:

✌️ 居中了,看着舒服多~