vue子组件样式不能被覆盖问题

Question

如题，我有个banner组件，要在index中使用，但是页面有两处调用banner组件，且样式略有不同，我在index.vue里给第一个调用的加了个top-banner样式,但是不起作用。
要求：要index.vue里的样式覆盖banner.vue里的样式该怎么写？

banner.vue

<template>
  <div class="banner">
    <img :src="banner" alt="banner图">
    <div class="banner-text" v-if="title_text">
      <h3 class="title-text">{{title_text}}</h3>
      <p class="content-text" v-html="content_text"></p>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Banner',
    data() {
      return {

      }
    },
    props: {
      banner: {
        type: String,
        required: true
      },
      title_text: String,
      content_text: String
    }
  }

</script>
<style lang="css">
  /* banner图 */
  .banner {
    position: relative;
    font-size: 0;
  }

  .banner img {
    width: 100%;
  }

  /* banner+文字 */
  .banner .banner-text {
    position: absolute;
    width: 800px;
    height: 100%;
    top: 0;
    left: 50%;
    margin-left: -400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .banner .banner-text .title-text {
    font-size: 30px;
    color: #ffffff;
    text-align: center;
    /* margin-top: 180px; */
  }

  .banner .banner-text .content-text {
    font-size: 16px;
    color: #ffffff;
    /* text-align: center; */
    margin-top: 90px;
    line-height: 28px;
  }

</style>

index.vue

<template>
  <div id="wrap">
    <header-menu></header-menu>
    <banner-text :banner="banner_src" :title_text="banner_title" :content_text="banner_text" class="top-banner">
    </banner-text>
    <footer-menu></footer-menu>
  </div>
</template>
<script>
  import headerMenu from '../components/header'
  import bannerText from '../components/banner'
  import footerMenu from '../components/footer'
  export default {
    data() {
      return {
        banner_src: '../../static/img/banner.png',
        banner_title: '世界和平',
        banner_text: '和谐美满',
        // 第二个图片文字
        index_img: '../../static/img/banner1.png',
      }
    },
    components: {
      headerMenu,
      footerMenu,
      bannerText
    }
  }

</script>
<style lang="css">
  .top-banner .banner-text {
    width: auto;
    height: auto;
    right: 360px;
    top: 145px;
    left: auto;
  }

  .top-banner .banner-text .title-text {
    font-size: 54px;
  }

  .top-banner .banner-text .content-text {
    font-size: 44px;
    margin-top: 44px;
    line-height: 44px;
    letter-spacing: 3px;
  }

</style>

Answer 1

1）index.vue的'top-banner' 加在了组件banner-text上，渲染的应该会是<div class='banner top-banner'></div>
然后样式又先有的top-banner,后有的banner,所以覆盖了吧，用!imporant试试呢？
2）或者写

 #wrap .banner .banner-text .content-text{
   font-size:54px
 }

Answer 2

.banner.top-banner

Answer 3

你这样写会同时作用两个calss的样式，可以通过向子组件传参的方式设置不同className的方式设置样式