Question

我有一个非常简单的反应组件

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输出

在此处转载为文字：

    <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/>来包装小文本

我希望标题文字（Big Header）比描述文字（small text和some more small text）大得多。

输出看起来像这样：

这是因为reactjs由于某种原因添加了一个跨度来环绕文本small text和some more small text（data-reactid＆＃34; .0.1.0.0.0.1.1.0＆＃34 ;和＆＃34; .0.1.0.0.0.1.1.2＆＃34;分别）

当我检查样式时，我发现这些span元素的样式被以下css规则覆盖

我真的很困惑，因为我自己并没有定义这些规则。

所以我点击了<style>...</style>，它转到

我想知道如何有效地覆盖这些css规则？

我想要的最终结果是：

Answer 1

如果您正在使用＆＃39; Normalize.css＆＃39;！ 解决此问题的方法是保留主css文件＆＃39; style.css＆＃39;在底部。至少低于normalize.css。
如果您使用的是Bootstrap， 直接来自Bootstrap官方网站，＆＃34;为了改进跨浏览器渲染，我们使用了Normalize.css，这是Nicolas Gallagher和Jonathan Neal的一个项目。＆＃34; 解决此问题的方法是保留主css文件＆＃39; style.css＆＃39;在底部。至少在bootstrap.css。

如何通过在reactjs / jsx中规范化css来防止我的css规则被覆盖？

1 个答案: