如何在 React/Antd 中将标签栏 header 创建为 Fixed/Sticky？

Question

我需要修复在抽屉中打开的标签栏 headers。这是我试过的。
Antd 推荐 react-sticky lib。不知何故它不起作用。也许是抽屉卷轴等原因。即使我隐藏了抽屉卷轴并为选项卡创建了一个卷轴 body，粘性也不起作用。

Ant Sticky Referans : https://ant.design/components/tabs/

react-sticky 包：https://www.npmjs.com/package/react-sticky

position: -webkit-sticky;
position: sticky;
top: 0;

我也很努力css但是还是不行

Answer 1

我正在寻找 Antd 如何处理主题：fixed/sticky [某事]。所以我从 Layout 组件中找出了 Header。固定样式位置解决了我的问题。可能这不是一个完美的解决方案，但至少现在在抽屉中 Tab Bar Headers 是固定的。最终代码是：

const renderTabBar = (props, DefaultTabBar) => (
    <Layout>
        <Header style={{ position: 'fixed', zIndex: 1, top: 0, padding: 0, width: '100%', 
          background: 'white' }}>
            <DefaultTabBar {...props} style={{
                top: 20,
            }} />
        </Header>
    </Layout>

);

    <Drawer
    placement="right"
    onClose={onClose}
    visible={visible}
    getContainer={false}
    title={<> </>}
    style={{ position: 'absolute' }}
    width={"25%"}
    keyboard={true}
    closable={true}
    closeIcon={<CloseOutlined />}
    mask={false}
    maskClosable={false}
    headerStyle={{ border: 'none' }}>
    <Tabs tabPosition="top"
        renderTabBar={renderTabBar}
        animated={true}
        style={{ paddingTop: 20 }}>
        {tabBody}
    </Tabs>
</Drawer >

如何在 React/Antd 中将标签栏 header 创建为 Fixed/Sticky？

How to create Tab Bar header as Fixed/Sticky in React/Antd?

css

tabs

reactjs

antd