关于Vux修改系统自带组件的问题

Question

系统自带的Panel组件样式如下:

我想要的样式如下:

为了实现上图的样式,我修改了系统自带的组件

       <template v-if="type === '4'">
        <a :href="getUrl(item.url)" v-for="item in list" @click.prevent="onItemClick(item)" class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__hd" v-if="item.src">
            <img class="weui-media-box__thumb" :src="item.src" alt="">
          </div>
          <div class="weui-media-box__bd">
            <p class="weui-media-box__title">{{item.title}}</p>
            <p class="weui-media-box__desc">{{item.desc}}</p>
            <p class="weui-media-box__title" style="color:crimson;font-size:17px;">{{item.desc2}}</p>
          </div>
        </a>
      </template>

desc2这个字段是我自己加的
并且修改了 weui_media_box.lessz中的样式

虽然实现了效果，但是感觉这样做有问题
请问:如何正确的去修改自带的组件样式,以及给组件添加新的自定义属性?

Answer 1

你把自己的css当成主题好了, 建立一个theme.css, 然后在每个组件的<style>中引入,或者在html的最后引入都可以啊.