reactjs - 如何修复 TabPanes 的宽度？

Question

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

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

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

谢谢。

Answer 1

好的，我想我明白了：

import styles from './someCssComponent.css';

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

然后在 CSS 模块中：

.foo { width: 60px; }

Answer 2

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

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

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