React中@media only screen媒体查询部分CSS不生效问题求助

大家好，我现在在做React项目的移动端适配，用@media only screen and (max-width: 576px)来写移动端样式，但遇到了一个头疼的问题：同一个媒体查询里，有的CSS规则生效了，有的却完全没起作用。

具体情况是：

• 全局的.encotekiCommunity h1和.circle样式都正常工作
• 媒体查询里的.circle样式能正常修改宽高，但.encotekiCommunity h1的字体大小就是没变化

以下是我的代码：

JSX代码 #

<div id='community' className='encotekiCommunity text-center'>
  <Col>
    <h1 className='mb-5 FontGothamRoundedBold'>Join Our Community</h1>
    <Row className='my-5' style={{display: 'flex', justifyContent: 'center'}}>
      <Col>
        <div style={{display: 'flex', justifyContent: 'center'}}>
          <a href='https://www.instagram.com/encoteki/' target='_blank'>
            <div class="circle" style={{margin:'0px 35px'}}>
              <img src="./Images/ig_logo.png" alt="Image" class="image" />
            </div>
          </a>
        </div>
      </Col>
    </Row>
    <h2 style={{marginTop: '150px'}}>And Save The World</h2>
  </Col>
</div>

CSS代码 #

/* 这部分正常生效 */
.encotekiCommunity h1{
  font-size: 70px;
  color: white;
  text-transform: uppercase;
}

/* 这部分正常生效 */
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;  /* make the container circular */
  overflow: hidden;  /* hide any content that overflows the container */
  background-color: white;
  padding: 15px;
}

@media only screen and (max-width: 576px) {
  /* 这部分完全不生效，字体大小还是70px */
  .encotekiCommunity h1{
    font-size: 20px;
  }

  /* 这部分正常生效，移动端宽高变成100px */
  .circle {
    width: 100px;
    height: 100px;
  }
}

我已经检查过媒体查询的语法没问题，也确认了移动端的视口设置是正确的，但就是搞不懂为什么只有h1的样式不生效。有没有大佬能帮我分析下可能的原因，或者给个解决思路？

备注：内容来源于stack exchange，提问作者Kim San