React点击div时保留原有红边并叠加蓝色选中外边框实现方法

核心实现思路 #

不覆盖元素原有border属性，使用CSS原生的outline属性绘制外层选中边框，该属性绘制的线条位于元素边框外侧，不占用盒模型空间，不会触发布局偏移，也无需新增额外DOM元素。 #

具体修改步骤 #

• 修复原有CSS语法错误：原.section-divs样式中cursor: pointer,末尾误写为逗号，需改为分号
• 调整.selected类样式：移除原有覆盖border的规则，改用outline实现蓝色外框，可通过outline-offset控制外框与原有红边的间距

修正后完整代码 #

CSS部分 #

.section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.section-divs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
    border: 4px solid red;
    cursor: pointer;
}

.selected {
  outline: 4px solid blue;
  /* 可根据视觉需要调整间距：0为紧贴红边，正数为外扩留空隙，负数为内收 */
  outline-offset: 2px;
}

JSX部分 #

原有类名切换逻辑已正常运行，仅需修正onClick的React绑定语法即可：

<div className='section'>
  <div 
    className={`section-divs${selectedDiv === div1 ? " selected" : ""}`} 
    onClick={clickMe}
  >
    Click me
  </div>
  <div 
    className={`section-divs${selectedDiv === div2 ? " selected" : ""}`} 
    onClick={clickMe}
  >
    Click me
  </div>
</div>

效果说明 #

选中状态下div会保留原有的4px红色边框，同时在外侧显示4px蓝色选中轮廓，两个div的网格布局不会发生偏移，点击切换时无布局抖动。

如果不需要蓝边和红边之间的留白，将.selected里的outline-offset值设为0即可。

内容的提问来源于stack exchange，提问作者manoop m