How to override css-modules in child compoent?

[Astray-git]

I have a <Select/> component with some deep level class:

<!-- Select.vue -->
<template>
  <div>
    <div :class="$style.select">...</div>
  </div>
</template>

<style lang="scss" module>
.select { 
  border: 1px solid #333; 
  border-radius: 2px;
}
</style>

Then I want to use It in my <InputGroup/> with some different style:

<!-- InputGroup.vue -->
<template>
  <div>
    <Select :class="$style.prefixSelect"/><Input/><BaseButton/>
  </div>
</template>

<style lang="scss" module>
.prefixSelect {} // can't target div.select in <Select/>
</style>

How can I override <Select/>'s style as It has a random deep class name(from $style.select)?

[chrisvfritz]

Good question. 🙂 I just added a note in the docs about this. As a sidenote, I would strongly recommend making all component names multi-word to avoid conflicts with current and future native HTML elements, as recommended in the Vue style guide.