React+Styled-components导航选中元素底部边框隐藏问题求助

问题描述 #

我使用React与styled-components开发导航栏时遇到问题：选中某个导航项时，该元素下方不应显示导航容器的底部边框（预期效果为选中项的边框“覆盖”容器底边框）。尝试过伪选择器等方法但未解决，相关代码如下：

样式代码 #

import styled, {css} from "styled-components";
export const NavBarNotificationWrapper = styled.div`
    display: flex;
    flex-direction: row;
    align-items: self-start;
    font-size: 16px;
    gap: 20px;
    color: #6C6C6C;
    border-bottom: 1px solid black;
  
`;

export const NavBarItem = styled.div`
    position: relative;
    ${(props) =>
        props.isSelected &&
        css`
            border-left: 2px solid #090A72; 
            border-right: 2px solid #090A72; 
            border-top: 2px solid #090A72; 
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            
         
            
        `}
    
`;

export const NavBarItemContent = styled.div`
    padding: 10px;

`;

React组件代码 #

const [selectedItemId, setSelectedItemId] = useState(null);

    const handleNavBarItem = (id) => {
        setSelectedItemId(id === selectedItemId ? null : id);
    };
    
    return (
        <NavBarNotificationWrapper>
            {testText.map((el) => (
                <NavBarItem
                    key={el.id}
                    isSelected={el.id === selectedItemId}
                    onClick={() => handleNavBarItem(el.id)}
                >
                <NavBarItemContent>{el.name}</NavBarItemContent>
                </NavBarItem>
            ))}
        </NavBarNotificationWrapper>
    );

};

解决方案 #

核心思路是让选中的导航项用背景色或底部边框覆盖容器的底边框，具体修改如下：

修改NavBarItem的选中状态样式，添加底部偏移和背景色：

export const NavBarItem = styled.div`
    position: relative;
    ${(props) =>
        props.isSelected &&
        css`
            border-left: 2px solid #090A72; 
            border-right: 2px solid #090A72; 
            border-top: 2px solid #090A72; 
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* 关键修改：向下偏移1px，用背景色盖住容器底边框 */
            bottom: -1px;
            background-color: #ffffff; /* 需与页面背景色保持一致 */
            /* 可选：如果背景色不好控制，也可以用底部边框替代 */
            /* border-bottom: 1px solid #ffffff; */
        `}
    
`;

原理说明 #

• 设置bottom: -1px让选中项向下偏移，刚好对齐容器的底边框位置；
• 用和页面背景色一致的background-color（或底部边框）覆盖容器的黑色底边框，视觉上就实现了选中项下方无容器底边框的效果；
• 保持原有选中项的顶部和左右边框，完美匹配预期的导航栏样式。

内容的提问来源于stack exchange，提问作者Oleksandr Bugay