tabBarStyle 怎么设置成头部是箭头样式,尾部是凹进去的箭头样式

要实现头部是箭头样式，尾部是凹进去的箭头样式，你可以使用 `::before` 和 `::after` 伪元素来实现。首先，你需要自定义标签的样式，然后使用 `::before` 和 `::after` 伪元素来添加箭头样式。以下是示例代码：

import { Tabs } from 'antd';

const { TabPane } = Tabs;

function CustomizedTabs() {
  const tabList = [
    { key: '1', tab: 'Tab 1' },
    { key: '2', tab: 'Tab 2' },
    { key: '3', tab: 'Tab 3' },
  ];

  // 设置标签样式
  const tabStyle = {
    height: 40,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    paddingLeft: 20,
    paddingRight: 20,
    borderBottom: 'none',
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: '#f0f2f5',
    color: '#1890ff',
    cursor: 'pointer',
  };

  // 设置头部箭头样式
  const beforeStyle = {
    content: '""',
    position: 'absolute',
    left: -20,
    top: 0,
    width: 0,
    height: 0,
    borderLeft: '10px solid transparent',
    borderRight: '10px solid transparent',
    borderBottom: '10px solid #f0f2f5',
  };

  // 设置尾部凹进去的箭头样式
  const afterStyle = {
    content: '""',
    position: 'absolute',
    right: -20,
    top: 0,
    width: 0,
    height: 0,
    borderLeft: '10px solid transparent',
    borderRight: '10px solid transparent',
    borderTop: '10px solid #f0f2f5',
  };

  return (
    <Tabs
      tabPosition="top"
      tabBarStyle={{ backgroundColor: '#f0f2f5', borderBottom: 'none' }}
      tabBarGutter={0}
    >
      {tabList.map((item, index) => (
        <TabPane tab={item.tab} key={item.key}>
          Content of Tab Pane {item.key}
        </TabPane>
      ))}
      <style jsx global>{`
        .ant-tabs-tab {
          ${tabStyle};
        }
        .ant-tabs-tab:first-child::before {
          ${beforeStyle};
        }
        .ant-tabs-tab:last-child::after {
          ${afterStyle};
        }
      `}</style>
    </Tabs>
  );
}

ReactDOM.render(<CustomizedTabs />, mountNode);

在上面的示例代码中，我们使用了 `::before` 和 `::after` 伪元素来添加样式，并使用 `:first-child` 和 `:last-child` 选择器来分别针对第一个和最后一个标签添加样式。你可以根据自己的需求来调整伪元素和样式的值，以达到满足你的样式要求的效果。