去掉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
  }