Vue 设置CSS样式不起作用解决

Vue设计代码，但是设置CSS样式不起作用 border: 1px solid grey;。

代码如下。

<template>
  <div class="goods_car_wrap">
    <div class="address">
      <div v-for="item in userInfo" :key="item.id">
        <span>用户名:{{ item.username }}</span><br>
        <span>电话:{{ item.phone }}</span><br>
        <span>地址:{{ item.address1 }}
          <div v-if="item.address1.length <=0" class="add_address" @click="handleAddAddress">
            <van-icon name="add" />
            <span>添加地址</span>
          </div>
        </span>
      </div>
    </div>
    <div class="goods_list_wrap">
      <div class="item flex" v-for="item in carGoodsList" :key="item.id">
        <img :src="require('../assets/image/goods/' + item.goodsPicture)" alt="">  
        <div class="wrap">
          <p>商品名:{{ item.goodsName }}</p>    
          <p>单价:{{ item.goodsPrice }}元</p>
          <p>总金额:{{ item.goodsPrice * item.goodsNum }}元</p>
        </div> 
        <van-stepper v-model="item.goodsNum" async-change @change="(value)=>{handleChange(value,item)}"/>
      </div>      
    </div>
    <van-submit-bar class="sub_wrap" :price="allPrice" button-text="提交订单" @submit="onClickButton" />
    <TabBar/>
    <!-- 添加地址弹窗 -->
    <van-dialog v-model:show="addressShow" title="添加地址" show-cancel-button
      :before-close="submitAddress">
      <van-cell-group>
        <div v-for="item in userInfo" :key="item.id">
          <van-field class="van_input_box" v-model="item.username" label="姓名" type="tel" />
          <van-field class="van_input_box" v-model="item.phone" label="手机号" type="number" required />
          <van-field class="van_input_box" v-model="item.address1" label="地址" type="textarea" rows="2" autosize required />
        </div>        
      </van-cell-group>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import {Options,Vue} from 'vue-class-component'
import {Watch} from 'vue-property-decorator'
import TabBar from '@/components/tabBar.vue'
import { useRoute, useRouter } from 'vue-router'
import {getCarListApi,putAddCarApi,getUserAddrApi,putUserAddrApi} from '@/utils/request'
import {goodsListType, userDetailType} from '@/utils/interface'
import {useStore} from 'vuex'
import { Toast, showFailToast, showToast, Dialog } from 'vant'

@Options({
    components:{
      TabBar
    }    
  })
export default class goodsCar extends Vue{
  router = useRouter()
  route = useRoute()
  store = useStore()

  carGoodsList:goodsListType[] = []  
  userInfo:userDetailType[] = []
  allPrice = 0
  addressShow = false
/*   formValue = {
    userId: this.store.state.uInfo[0].id,
    deliveryUsername: '',
    deliveryUserPhone: '',
    deliveryUserAddr: '',
  } */

  //监控watch carGoodsList改变后重新计算价格
  @Watch('carGoodsList',{deep:true,immediate:true})
  watchCarGoodsList(val:goodsListType[],oldVal:goodsListType[]){
    this.allPrice = this.countPrice()
  }

  onClickButton = ()=>{
    console.log('display')
  }
  countPrice = ():number=>{
    let price = 0
    this.carGoodsList.forEach(el=>{
      price += el.goodsNum * el.goodsPrice
    })
    return price*100
  }

  handleChange = async(val:string,item:goodsListType):Promise<boolean>=>{
    const res = await putAddCarApi({
      'userId': this.store.state.uInfo[0].id,
      'goodsId': item.id,
      'goodsNum': val
    })
    if (res.status == 200){
      return true
    } else {
      return false
    }
  }

  //去购物车地址
  getAddress = async():Promise<void>=>{
    const res = await getUserAddrApi({
      id:this.store.state.uInfo[0].id
    })
    if (res.status == 200){
      console.log('客户收货地址：',res)
      this.userInfo = res.data
    }
  }
  //发送用户地址
  submitAddress = async(action:string):Promise<boolean>=>{
    if(action == 'confirm'){
      /* //使用正则验证手机号
      if(!/^1[3-9]\d{9}$/.test(this.userInfo.phone)){
        showFailToast('请输入正确的手机号');
        return false
      } */
      const res = await putUserAddrApi(this.userInfo)
      console.log('res',res)
      if(res.status == 200){
        return true
      }
      return false
    }
    if(action == 'cancel'){
      // console.log(111)
      Dialog.done()
    }
    return false
  }

  //添加地址
  handleAddAddress = ()=>{
    this.addressShow = true
  }

  //初始化加载
  init = async():Promise<void>=>{
    if (this.store.state.uInfo[0].id){
      const res = await getCarListApi({
        userId:this.store.state.uInfo[0].id
      })
      if (res.status == 200){
        this.carGoodsList = res.data
        this.allPrice = this.countPrice()
      }
      this.getAddress()
    }
  }
  public mounted(){
    this.init()
  }
}

</script>
<style lang="less" scoped>
  .goods_car_wrap{
    .item{
      padding: 30px;
      background: #fff;
      margin-bottom: 30px;
      .wrap{
        font-size: 15px;
        p{
          padding-bottom: 5px;
        }
        img{
          display: block;
          width: 100px;
          height: 100px;
          margin-right: 30px;
        }
      }    
    } 
    .sub_wrap{
      bottom: 50px;
    }   
    .address{
      width: 300px;
      height: 300px;
      background: #fff;
      margin-bottom: 30px;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      
      .add_address{
        font-size: 15px;
        font-weight: bold;
      }      
    }  
    .van_input_box input, .van_input_box textarea{
        border: 1px solid grey;
    }
    /* .van-field {
      border: 1px solid #e2e2e2;
      width: 90%;
      margin: 12px auto 28px auto;
      background: #f6f6f6;
    }  */
  }
  
</style>

 

经过debug返现是样式没起作用。原因是需要使用 ::v-deep 做样式穿透

.van_input_box::v-deep input, .van_input_box::v-deep textarea{
        border: 1px solid grey;
    }

 更改后，输入添加了边框。