React+SCSS模块中添加active类后::after样式失效问题排查

问题现象 #

使用React结合SCSS Modules开发时，未给标签添加active类时，::after伪元素能正常显示文本下方的线条；添加active类后，该伪元素样式完全失效，线条消失。

相关代码 #

JSX代码 #

<Row>
  <Col>
    <div className={`${styles.lgtTab}`}>
      <div className={`${styles.tabNav}`}>
        <div className={`d-inline-block me-4 py-2 active ${styles.tabHeaderItem}`}>
          <i className="bi bi-list-check me-2"></i>
          <a href="#productFeatures">Product Features</a>
        </div>
        <div className={`d-inline-block me-4 py-2 ${styles.tabHeaderItem}`}>
          <i className="bi bi-justify-left me-2"></i>
          <a href="#moreDetails">More Details</a>
        </div>
        <div className={`d-inline-block me-4 py-2 ${styles.tabHeaderItem}`}>
          <i className="bi bi-question-square me-2"></i>
          <a href="#askFromSeller">Ask From the Seller</a>
        </div>
      </div>
      <div className={`py-4 pe-4`}>
        <div id="productFeatures" className={`${styles.tabContent}`}>
          <h3>Product Features</h3>
          <Table striped bordered className={`mx-4 ${styles.lgtTable}`}>
            <tbody>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
              <tr>
                <td>something</td>
                <td>something else</td>
              </tr>
            </tbody>
          </Table>
        </div>
        <div id="moreDetails" className={`${styles.tabContent}`}>
          <h3>More Details</h3>
          <p className={`mx-4`}>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eum ipsam quod nostrum repudiandae,
            a fugit reprehenderit necessitatibus eos.
            Similique eaque odio quasi cumque rerum doloribus eius, fugiat enim quibusdam?
          </p>
        </div>
        <div id="askFromSeller" className={`${styles.tabContent}`}>
          <h3>Ask From the Seller</h3>
          <span className={`mx-4`}>
            Log in to your account to ask the seller of this product. <a href="#" className={`text-decoration-none ${styles.lgtLoginLink}`}>Login / Register</a>
          </span>
        </div>
      </div>
    </div>
  </Col>
</Row>

SCSS代码 #

.tabNav{
    border-bottom: 1px solid #efefef;
    .tabHeaderItem{
        font-size: 18px;
        font-weight: 500;
        position: relative;
            a{
                text-decoration: none;
                color: var(--bs-gray-600);
            }
        &.active{
            &::after{
                content: "";
                position: absolute;
                top: 41px;
                left: 0;
                width: 100%;
                height: 5px;
                border-radius: 100px 100px 0 0;
                background-color: $primary;
                -webkit-transition: height .3s,opacity .15s;
                -o-transition: height .3s,opacity .15s;
                transition: height .3s,opacity .15s;
                bottom: 0px;
                right: 0px;
            }
            a{
                color: var(--bs-body-color);
            }
        }
        i{
            font-size: 20px;
        }
    }
}

原因排查与解决方案 #

1. 伪元素定位冲突 #

你给active状态下的::after同时设置了top:41px和bottom:0px，这两个属性同时存在会导致浏览器计算元素位置时出现冲突，可能让伪元素被挤出父元素可视范围（父元素是position:relative）。

解决： 移除top:41px和right:0px，只保留bottom:0，让伪元素固定在父元素底部：

&.active{
    &::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        border-radius: 100px 100px 0 0;
        background-color: $primary;
        transition: height .3s,opacity .15s;
    }
    // ...其他样式
}

2. 全局类与模块化类冲突 #

你使用的active是全局类（未通过SCSS Modules处理），而.tabHeaderItem是模块化类（带哈希后缀），如果Bootstrap等全局样式库中的active类有影响伪元素的属性（比如overflow:hidden），会导致样式失效。

解决：

• 打开浏览器开发者工具，查看该元素的::after伪元素样式，确认是否被其他样式覆盖；
• 改用模块化的active类，比如在SCSS中定义.tabActive，然后在JSX中替换active为${styles.tabActive}：

// SCSS中修改
&.tabActive{
    &::after{/* 样式 */}
}

// JSX中修改
<div className={`d-inline-block me-4 py-2 ${styles.tabActive} ${styles.tabHeaderItem}`}>

3. 选择器嵌套验证 #

确认SCSS嵌套编译后的选择器是否正确，编译后应该是.tabNav .tabHeaderItem.active::after，在开发者工具中查看该选择器是否被应用到元素上。

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