Vue 如何实现多层组件的派生？

我需要做一个两层继承的组件，这是代码：

BaseModal.vue

<template lang="jade">

.modal
  slot(name="modal-header")
    .modal-header This is header

</template>

<style lang="stylus">

.modal
  color: red

</style>

MyModal.vue

<template lang="jade">

my-modal
  slot(name="modal-header" slot="modal-header")
    .modal-header Header

</template>

<script lang="coffee">

module.exports =
  components:
    myModal: require './BaseModal.vue'

</script>

MyMyModal.vue

<template lang="jade">

my-modal
  slot(slot="modal-header")
    .modal-header HEADER!!!!

</template>

<script lang="coffee">

module.exports =
  components:
    myModal: require './MyModal.vue'

</script>

<style lang="stylus">

.modal
  color: green

</style>

但是最终渲染出来的结果却是 红色 的！

从浏览器来看的话，是因为最底层的样式被写在最下面了，所以导致高层组件的不能覆盖掉前面的。

不知道大家有没有什么好的办法？或者说我写多层派生组件的姿势不对？