2021-06-16vuecli中改变Vant组件样式

给工作中经常遇到的做个记录，方便以后工作中查阅。
由于组件在封装过程中都会用scope隔绝局部css对全局css的污染，所以要想方便的更改组件样式必须使用deep选择器。下面我将给出示例。

<template>
  <div id="pay">
      <!--顶部导航-->
    <van-nav-bar title="支付" nav-bar-text-color="red" left-arrow style="position:fixed;left:0;top:0;width:100%" />
 </div>
 </template>
     

#pay ::v-deep .van-nav-bar__title {
  max-width: 60%;
  margin: 0 auto;
  color: white;
  font-weight: 500;
  font-size: 4.26667vw;
}