如何在 React/Antd 中将标签栏标题创建为固定/粘性？答案

【问题标题】：How to create Tab Bar header as Fixed/Sticky in React/Antd?如何在 React/Antd 中将标签栏标题创建为固定/粘性？
【发布时间】：2021-08-06 08:51:37
【问题描述】：

我需要修复在抽屉中打开的标签栏标题。这是我尝试过的。
Antd 推荐 react-sticky 库。不知何故，它不起作用。也许原因是抽屉滚动等。即使我隐藏抽屉滚动并为标签正文创建滚动，粘性也不起作用。

Ant 粘性引用：https://ant.design/components/tabs/

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

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

我也尝试过使用 css，但效果不佳。

【问题讨论】：

标签： css reactjs tabs antd

【解决方案1】：

我在寻找 Antd 如何处理主题：固定/粘性 [sth]。所以我从 Layout 组件中找到了 Header。设置样式位置固定解决了我的问题。可能这不是一个完美的解决方案，但至少现在抽屉中的标签栏标题已修复。最终代码是：

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 >

【讨论】：