How to customize style of VueJS 2.0 using stylus?

Question

I am using v-text-field without vuetify.min.css just use stylus.

Here is my code.

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

I am trying to hide some divs in v-text-field.

But I got nothing changed.

Answer 1

As per https://vue-loader.vuejs.org/en/features/scoped-css.html#notes you need to use >>> operator for CSS

So this should work:

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

You can use lang="stylus" and it will work, but your IDE might throw some syntax errors.

I'm not sure what's correct stylus syntax for that.

---

Note that it was implemented in v12.2.0

Answer 2

That is not possible using scoped styles (That's the point of scoping)

What you could do is either passing down a prop which indicates that the divs are hidden or handle it globally.

passing down a prop:

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>