如何防止我的 css 规则被 reactjs/jsx 中的规范化 css 覆盖？答案

【问题标题】：How to prevent my css rule to be overridden by normalise css in reactjs/jsx?如何防止我的 css 规则被 reactjs/jsx 中的规范化 css 覆盖？
【发布时间】：2016-10-20 08:40:13
【问题描述】：

我有一个非常简单的 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 输出

此处转载为文字：

    <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 ".0.1.0.0.0.1.1.0" 和 ".0.1.0.0.0.1.分别为 1.2")

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

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

所以我点击<style>...</style>，它会将我带到

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

我想要的最终结果是：

【问题讨论】：

你确定这些样式实际上来自 normalize.css 吗？查看github link in your picture 它实际上并没有显示任何这些样式。是否有可能在 normalize.css 样式之后注入样式？同样在我看来，我认为如果你不使用<br/> 来创建空间会更干净——而只是使用两个 div 来包围显示块的第一个和第二个文本，它们会分开他们在不同的行。

标签： css reactjs

【解决方案1】：

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

【讨论】：