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

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出于某种原因添加了一个span来包裹文本

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规则？

我想要的最终结果是：

Answer 1

1. 如果您使用“Normalize.css”！ 此问题的解决方案是将主 css 文件“style.css”保留在底部。至少低于normalize.css。

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

Answer 2

我遇到了与您类似的问题，我的解决方案是在 app.tsx 文件顶部导入 Bootstrap 样式。这样做的原因是它可以防止 Bootstrap CSS 被应用程序中的其他样式覆盖，它对我有用