web-dev-qa-db-ja.com

Vuetifyでカスタムテーマを使用し、コンポーネントに色変数を渡す

index.jsファイルでは、Vuetify themeオブジェクトを会社の色で手動でオーバーライドしています。

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

これで、テンプレートのこれらの色を次のように使用できます。

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

私が望んでいるのは、テンプレートスタイル内で、上記で定義したprimaryオブジェクトまたはthemeオブジェクトのその他の変数を使用することです。

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

スタイルセクションに色の16進値を簡単に書き込むことができますが、繰り返したくないので、themeオブジェクトを使用して、色を簡単に変更できるようにします。どこでも、色の定義の間違いにつながるタイプミスを避けます。

vuejs2vue-componentvuetify.js
27
Narxx

:style属性を利用してこれを回避する方法があります。これを使用して、カスタムCSSプロパティを事後的に設定できます。

計算されたプロパティを追加します。

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

スタイルをcssPropsにバインドします。

<div id="app" :style="cssProps">

次に、あなたのスタイルで：

<style scoped>
    label
        color: var(--secondary-color);
</style>

この議論から適応： https://github.com/vuejs/vue/issues/7346

18
Vic