title: Problems adding custom CSS to Vuetify component
body: <p>I'm working with the Vuetify selector input component, <code>v-select</code>, and I want to custom style it. Since the component renders with only one <code>v-select</code> and no necessary children in the html, I turned to styling the component via inspecting in chrome and copying down the class there. For example, to change the font size of the active value, I used:</p>
  
  <pre><code>.v-select__selections {
      font-size: 20px;
  }
  </code></pre>
  
  <p>This worked fine, until I realized my styles in this manner did not work on <em>any</em> parts of the (normally hidden) navigation drawer. For example, </p>
  
  <pre><code>.v-menu__content {
      height: 500px;
  }
  </code></pre>
  
  <p>Would not impact the styles in any way. Bizarrely enough, it was not simply my styles getting overwritten by Vuetify styles (!important had no effect) - it appeared that my CSS didn't reach the components at all. There was no trace of any of my written styles upon inspect. How?</p>
  
  <p>I believe this is due to the active-based nature of the drawer-part of the selector component. Is there another way I should be addressing those kinds of elements in CSS? I wish I could provide a Jsfiddle, but (on the templates I've found), Vuetify renders completely differently. I'm using Vuetify 1.1.7.</p>
  
  <p>My styles are included directly in the component .vue file, non scoped. Vuetify and vuetify styles are imported in main.js:</p>
  
  <pre><code>import Vuetify from 'vuetify'
  import 'vuetify/dist/vuetify.min.css'
  import 'material-design-icons-iconfont/dist/material-design-icons.css'
  </code></pre>
  
  <p>File structure (Default structure from <code>vue init webpack -myProject</code>):</p>
  
  <pre><code>src/
      -main.js 
      -app.vue 
      -components/
          -problematicComponent.vue
  index.html
  </code></pre>
  
  <p>Edit: I also tried using deep selectors, but the problem still remained with the hidden menu components:</p>
  
  <pre><code>&gt;&gt;&gt;.v-menu__content {
      height: 500px;
  }
  </code></pre>
  
  <p>Therefore the problem I have is different than the problem here: </p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/questions/50985783/vuetify-css-not-working-taking-effect-inside-component">Vuetify - CSS not working (taking effect) inside component</a></p>
  </blockquote>