我有一个非常简单的react组件

class UpgradeContainer extends Component {
  render() {
    return (
      <div className={styles.msg}>
            <div className={styles['msg-container']}>
              <h3 className={`${styles.title} highlight-color`}>
                Big Header
              </h3>
              <div className={`${styles.description} alternate-color`}>
                  Small text
                  <br />
                  Some more small text
              </div>
            </div>
      </div>
    );
  }

字符串
下面是相关的css

.title {
  font-size: 40px;
  line-height: 50px;
  color: white;
}
.description {
  text-align: center;
  font-size: 16px;
  padding: 20px 0 10px;
  color: white;
}

型
下面是上面组件的DOM输出
x1c 0d1x的数据
现将其全文转载于此：

<div class="mRMOZryRtlFUx_NHlt1WD" data-reactid=".0.1.0.0.0.1">
        <h3 class="_2s6iXRZlq-nQwIsDADWnwU highlight-color" data-reactid=".0.1.0.0.0.1.0">
Big Header</h3>
         <div class="_1pFak-xR0a8YH6UtvoeloF alternate-color" data-reactid=".0.1.0.0.0.1.1">
          <span data-reactid=".0.1.0.0.0.1.1.0">Small text</span>
           <br data-reactid=".0.1.0.0.0.1.1.1">
          <span data-reactid=".0.1.0.0.0.1.1.2">Some more small text</span></div></div>

型
如您所见，reactjs添加了几个<span/>来 Package 小文本
我希望标题文本（Big Header）比描述文本（small text和some more small text）大得多。
然而，输出看起来像这样：

的
这是因为reactjs出于某种原因添加了一个span来环绕文本small text和some more small text（data-reactid分别为“.0.1.0.0.0.1.1.0”和“.0.1.0.0.1.1.2”）
当我检查样式时，我发现这些span元素的样式被以下css规则覆盖

的
我真的很困惑，因为这些规则不是我自己定义的。
所以我点击<style>...</style>，它会把我带到

我想知道如何有效地覆盖这些css规则？
我想要的最终结果是：
x1c4d 1x的