使用React Styled Components如何给激活标签加白边覆盖右侧面板边框

架构老林

2026-9-27

实现方案

调整布局和样式逻辑即可实现需求，具体操作如下：

给包裹左侧tab和右侧panel的父容器设置display: flex，保证两个区块横向无缝排列
给StyledHeadingTab新增激活态props接收选中状态，调整定位与层级
让激活的tab层级高于右侧panel，右移1px刚好覆盖住panel的左边框

修改后的样式代码

// 新增父容器样式，用来包裹左右两个区块
const StyledTabContainer = styled.div`
  display: flex;
`;

const StyledPanel = styled.div`
  padding-top: 48px;
  padding-left: 64px;
  padding-right: 64px;
  border: 1px solid lightgrey;
  width: 954px;
  position: relative;
  z-index: 1; // 基础层级低于激活的tab
`;

const StyledHeadingTab = styled.div`
  max-height: 72px;
  width: 294px;
  border-top: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  border-bottom: 1px solid lightgrey;
  // 激活态样式
  ${props => props.isActive && `
    position: relative;
    right: -1px; // 右移1px刚好覆盖panel的左边框
    border-right: 1px solid #fff;
    z-index: 10; // 层级高于panel，保证边框覆盖生效
  `}
`;

组件调用示例

import { useState } from 'react';

function TabPanel() {
  const [activeIndex, setActiveIndex] = useState(0);
  // 示例tab数据可根据实际业务替换
  const tabList = [
    { title: '标签1', content: '内容1' },
    { title: '标签2', content: '内容2' }
  ];

  return (
    <StyledTabContainer>
      <div className="tab-list">
        {tabList.map((item, index) => (
          <StyledHeadingTab
            key={index}
            isActive={activeIndex === index}
            onClick={() => setActiveIndex(index)}
          >
            {item.title}
          </StyledHeadingTab>
        ))}
      </div>
      <StyledPanel>
        {tabList[activeIndex].content}
      </StyledPanel>
    </StyledTabContainer>
  )
}