スタイラスを使ってVueJS 2.0のスタイルをカスタマイズする方法は？

Question

vuetify.min.cssを使用せずにv-text-fieldを使用しています。単にスタイラスを使用します。

ここに私のコードです。

<template> 
    <v-text-field type="text" name="password"></v-text-field> 
</template> 
<style lang="stylus" scoped="scoped"> 
.input-group_details { 
    XXX 
} 
</style> 

私はv-text-fieldにいくつかのdivを隠そうとしています。

しかし、私は何も変わっていません。あなたは何ができるかスコープスタイルを使用できません

Answer 1

（それはスコープのポイントです）

はdivタグを非表示またはグローバルそれを処理していることを示しているのいずれかであるpropを伝承します。

小道具伝承：あなたはCSS

ため>>>演算子を使用する必要が https://vue-loader.vuejs.org/en/features/scoped-css.html#notesごとに

const textField = { 
 
    template: ` 
 
    <div> 
 
     <div>Always shown</div> 
 
     <div v-if="shown"> 
 
     Conditionally shown 
 
     </div> 
 
    </div> 
 
    `, 
 
    props: { shown: Boolean } 
 
}; 
 

 
Vue.component('v-text-field', textField); 
 

 
new Vue({}).$mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <b>shown = true:</b> 
 
    <v-text-field :shown="true"></v-text-field> 
 
    <br> 
 
    <b>shown = false:</b> 
 
    <v-text-field :shown="false"></v-text-field> 
 
</div>

Answer 2

は、これは動作するはずです：

<style scoped> 
>>> .input-group_details { 
//your css 
} 
</style> 

lang="stylus"を使用すると動作しますが、IDEで構文エラーが発生することがあります。

スタイラスの正しい構文がわかりません。

---

それはスコープstyles`を使用不可能であることを ` implemented in v12.2.0