【Antd】怎么给 Tabs 组件 的内容区域增加间隔呢？

Question

大佬们，想让 Tabs 组件的内容可以自动加空隙，这样写为什么不生效呢

import React from 'react'
import { Tabs, TabsProps, TabPaneProps, Space } from 'antd'

const TabsPro = Tabs

TabsPro.TabPane = (props: TabPaneProps & { space?: boolean }) => {
  return (
    <Tabs.TabPane {...props}>
      {props.space ? (
        <Space direction='vertical' size='small' style={{ width: '100%' }}>
          {props.children}
        </Space>
      ) : (
        props.children
      )}
    </Tabs.TabPane>
  )
}

export default TabsPro

预期是让这三行内容自动有间隔 <Space>

 <TabsPro>
    <TabsPro.TabPane key='aaa' tab='aaa' space>
        <div>第一行</div>
        <div>第二行</div>
        <div>第三行</div>
    </TabsPro.TabPane>
 </TabsPro>

Answer 1

提供一个在线demo看看

Answer 2

codepen
我试了下没啥问题。你打开开发者工具看下 <Space> 有没有被正确渲染

或者用 React Developer Tools 看下组件是否正确渲染也行

Answer 3

1. 全局样式覆盖
2. 如果是css modules写法使用:global后进行覆盖