使用样式化组件的Antd卡填充覆盖问题

Question

我是React和样式化组件的新手，我正在使用和设计Web应用程序中的大多数设计部分，

因此，在上面的屏幕截图中，有一张摘要卡（选择了矩形），其中包含有关位置，代理等的一些详细信息（计数）。我想将顶部填充设置为20px，而不是默认的24px，我不不知道该怎么做，因为我也在使用样式化的组件。

import React from 'react'
import Summery from './partials/SummeryCard'
import styled from 'styled-components'
import { STYLES } from 'theme'
import { Card as CustomCard } from 'antd'

<CustomCard
 .ant-card-body{
   padding-top:'20px'
 }
/>

const Wrapper = styled.div`
  margin-top: 20px;
`
const PaperWrapper = styled(CustomCard)`
  margin: 0px;
  box-shadow: ${STYLES.BOX_SHADOW};
  background: white;
  height: 116px;
`


const { V2_PROFILE_CLOUD_FRONT_URL } = process.env

const SummeryCard = ({
  locationsCount,
  regionsCount,
  branchesCount,
  agentsCount,
  agentsList,
}) => {
  return (
    <Wrapper>
      <PaperWrapper>
        <Summery
          locationsCount={locationsCount}
          regionsCount={regionsCount}
          branchesCount={branchesCount}
          agentsCount={agentsCount}
          agentsList={agentsList}
          baseURL={V2_PROFILE_CLOUD_FRONT_URL}
        />
      </PaperWrapper>
    </Wrapper>
  )
}

export default SummeryCard

这是组件代码！

预先感谢