web-dev-qa-db-ja.com

Vuetifyコンポーネントのフォントサイズを変更するには

私はvue-loaderでv-text-fieldとv-selectを使用しています。
フォントサイズを変更しようとしましたが、できませんでした。フォントサイズを変更するにはどうすればよいですか？

私のコードはこれが好きです。

<template lang="pug">
p label-1
v-text-field(...)

p label-1
v-text-field(...)
</template>

<stylelang="sass">
.input-group .input-group__input
  font-size: 12px !important
</style>

<stylelang="sass"scoped>
.p
  font-size: 12px
</style>

開発者ツールのスクリーンショット

javascriptcssvue.jsvuetify.js
8
tomlla

Bodyにfont-familyを設定します。 Vuetifyスタイラスエントリをインポートする場合、main.stylは$ font-family変数を上書きします。

2
Nisal Edu

アプリケーション全体でtext fieldなどの単一コンポーネントのフォントサイズを変更するには：

<style>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

別のコンポーネント内のフォントサイズを変更するには、スコープスタイルを使用します。

<style scoped>
  .v-text-field input {
    font-size: 1.2em;
  }
</style>

より一般的なアプローチでは、.v-inputを使用して複数のコンポーネントタイプをターゲットにすることもできます

.v-input {
    font-size: 1.2em;
}

または

.v-input input {
    font-size: 1.2em;
}

最後に、ラベルをターゲティングすることもできます。

.v-input .v-label {
    font-size: 1.2em;
}
12
Steven Spungin

または、divクラスを作成してこれを指摘することもできます。

<style lang="stylus" scoped>
  .element
    color white    
    padding 0
    margin 0
    font-size 150%
</style>

.element
      | 一共 : {{ sum("quantity") }} ，....
1
Raju yourPepe