React中:active伪类使用错误致元素消失的问题排查与修复

核心错误原因 #

你在TSX中直接将:active作为类名赋值给元素，这是错误的用法。:active是CSS伪类，用于匹配元素被临时激活（比如鼠标按下）的状态，不是一个可直接通过className设置的独立类名。当你写"original-bg:active"时，浏览器会尝试寻找名为original-bg:active的CSS类，而非应用.original-bg类的:active伪类样式，这直接导致元素丢失了.original-bg的基础布局样式，所以看起来“消失”了。

修复步骤 #

1. 调整CSS代码，新增持久选中状态类

由于你需要的是持久的选中状态（而非点击瞬间的激活状态），需要新增一个专门的选中类来替代:active伪类的作用：

.original-bg {
    background-image: url('../../../asset/image/tool/grid.png');
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #ccc;
    display: inline-block;
    background-size: 24px;
    color: #666;
    text-decoration: none;
    padding: 4px;
    margin-right: 10px;
}

/* 新增选中状态类，用于持久化的选中样式 */
.original-bg.selected {
    border-color: blue;
}

/* 若仍需保留点击瞬间的激活样式，可保留:active伪类 */
.original-bg:active {
    border-color: blue;
}

2. 修改TSX代码，正确拼接类名

当imgBg === "origin"时，给元素添加selected类，同时保留基础的original-bg类：

<a title="origin" className={`original-bg ${imgBg === "origin" ? "selected" : ""}`}></a>
<a title="red" className="bg-red"></a>

效果说明 #

修改后，元素始终会加载.original-bg的基础布局样式，选中状态下仅额外应用selected类的边框颜色样式，既解决了元素消失的问题，也实现了选中时边框变蓝的需求。

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