去掉antd-mobile裏list組件和inputItem組件自帶的上下邊框

前言

前言：之前用antd-mobile裏的組件等組件時發現它都有自帶邊框，多層嵌套後就會發現邊框重複疊加，影響美觀，有時候我們根本不需要邊框，那怎麼刪掉這些邊框呢？本文主要介紹如何刪掉自帶邊框。

案例

如下：
去掉邊框前

去掉邊框後

問題分析

他的原理是在
在組件中通過.am-list-body::before和am-list-body::after加入background-color:#ddd,來實現上下邊框
在組件中通過.am-list-line::after加入background-color:#ddd實現下邊框。
知道原理後再去解決是不是很簡單啊？我們只需要把對應的背景色替換成白色就可以

解決

在less或css文件中加入如下代碼即可

    //list組件
  div.am-list-body::before{
        background-color: white!important;
    }
    div.am-list-body::after{
        background-color: white!important;
    }
   .am-list-body {
    border-top: none;
    border-bottom: none;
  }
    //inputItem組件
    div.am-list-line::after{
        background-color: white!important;
    }

  .am-list-line {
    border-top: none;
    border-bottom: none
  }