React/TypeScript项目中点击div时如何修改其边框颜色与宽度

你已经通过setSelection维护了选中的展厅状态，直接基于选中状态动态绑定样式即可，有两种常用实现方案：

方案1：CSS类控制（推荐，易维护） #

1. 先定义卡片基础样式和选中态样式，为了避免边框宽度变化导致布局抖动，默认可以用等宽的透明边框：

.showroom-card {
  /* 保留你原有的卡片样式，补全默认边框 */
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: border-color .2s ease; /* 可选，加过渡效果交互更自然 */
}
/* 选中态样式 */
.showroom-card.selected {
  border-color: #2563eb; /* 参考截图的选中蓝色，可自行替换色值 */
}

2. 修改组件代码，根据当前选中的展厅值判断是否给卡片加selected类名：

// 你已经定义过的选中状态，直接取值比对即可
const [selection, setSelection] = useState<{showroom: string | null}>({showroom: null});

return (
  <div
    className={`showroom-card ${selection.showroom === 'Westchester' ? 'selected' : ''}`}
    onClick={() => setSelection({ showroom: 'Westchester' })}
  >
    {/* 卡片内部原有内容不变 */}
  </div>
)

如果你是循环渲染多个展厅卡片，直接用循环项的值做判断即可，不用写死展厅名：

const showroomNames = ['Westchester', 'Manhattan', 'Brooklyn'];

return (
  <div className="showroom-list">
    {showroomNames.map(name => (
      <div
        key={name}
        className={`showroom-card ${selection.showroom === name ? 'selected' : ''}`}
        onClick={() => setSelection({ showroom: name })}
      >
        {name}
      </div>
    ))}
  </div>
)

方案2：动态内联样式（适合少量样式改动场景） #

如果不想额外写CSS类，也可以直接给元素绑定动态style属性：

<div
  className="showroom-card"
  onClick={() => setSelection({ showroom: 'Westchester' })}
  style={{
    border: selection.showroom === 'Westchester' 
      ? '2px solid #2563eb' 
      : '1px solid #e5e7eb' /* 替换成你默认的边框样式 */
  }}
>
  {/* 卡片内容 */}
</div>

效果参考：

小提示：如果切换边框时不想出现布局位移，要么保持默认和选中态的边框宽度一致（用透明边框占位），要么用box-shadow模拟边框效果，不会占据文档流位置。

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