穿透设置第三方组件的class相关疑问

<template>

    <div class="icons">

      <swiper>

          <swiper-slide>

            <div class="icon"  v-for="item of iconList" :key="item.id">

                <div class="icon-img">

                    <img class="icon-imgcontent" :src="item.imgUrl">

                </div>

                <p class="icon-title">{{item.desc}}</p>

            </div>

         </swiper-slide>

      </swiper>

    </div> 

</template>

<script>

export default {

  name: 'HomeIcons',

  data() {

      return {

          iconList:[{

              id:'0001',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点"

          },{

              id:'0002',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点2"

          },{

              id:'0003',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点3"

          },{

              id:'0004',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点"

          },{

              id:'0005',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点2"

          },{

              id:'0006',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点3"

          },{

              id:'0007',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点"

          },{

              id:'0008',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点2"

          },{

              id:'0009',

              imgUrl:'http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png',

              desc:"热门景点3"

          }]

      }

  },

}

</script>

<style lang="stylus" scoped>

  @import '~styles/varibles.styl'

  .icons >>> .swiper-container

    display flex

    flex-wrap wrap

    height 0

    padding-bottom 50%

    .icon

      overflow hidden

      width 25%

      height 0

      padding-bottom 25%

      position relative

      .icon-img

        box-sizing border-box

        position absolute

        top 0

        right 0

        left 0

        bottom .44rem

        overflow hidden

        box-sizing border-box

        padding .15rem .3rem

        .icon-imgcontent

          width 100%

          height 100%

      .icon-title

       position absolute

       bottom 0

       right 0

       left 0

       height .44rem

       line-height .44rem

       text-align center

       color $darkTextColor

  .icons >>> .swiper-container

    height 0

    padding-bottom 50%   

</style>

老师，本来我对.icon 用这个flex属性布局里面的icon图标 display flex、flex-wrap wrap，没有用老师的float left 布局；现在因为要穿透设置.swiper-container的属性，.swiper-container设置display flex、flex-wrap wrap这些是无效的吗？我icon图标都是一列展示了