如何修复TabPanes的宽度？

Question

我在React中使用以下ant设计组合：

<Tabs type="card">
  <TabPane>...</TabPane>
</Tabs>

在React中将自定义CSS放在TabPane元素上的最简单方法是什么？ 我想修复它们的宽度但是甚至无法将自定义className放在TabPane上，因为它一旦到达DOM就会丢失。甚至无法将<TabPane>打包到<div>，因为<Tabs>仅接受<TabPane>作为孩子。

感谢。

Answer 1

看起来不支持该选项，但Tabbar有一个样式对象，不确定它是否是您要找的...

<Tabs type="card" tabBarStyle={{color: 'red'}>
  <TabPane>...</TabPane>
</Tabs>

o覆盖css ...我们不得不覆盖许多antd的css :(

Answer 2

好的，我想我得到了这个：

import styles from './someCssComponent.css';

<Tabs type="card">
  <TabPane key={key} tab={<div className={styles.foo}></div>}>Yolo</TabPane>
</Tabs>

然后在CSS模块中：

.foo { width: 60px; }