React 组件和覆盖 Twitter Bootstrap 样式答案

【问题标题】：React Components and overriding Twitter Bootstrap stylesReact 组件和覆盖 Twitter Bootstrap 样式
【发布时间】：2016-10-10 05:24:56
【问题描述】：

我目前正在使用 reactjs 和 twitter bootstrap（用于样式）。我还在使用HERE 找到的 CSSModules 库，以允许使用外部样式表。我已经无法让任何引导组件正确设置样式，但是我正在努力用我自己的自定义 CSS 覆盖 Twitter 引导样式。更具体地说，我无法用自己的样式覆盖 navbar-inverse 类。我的目标是将背景颜色更改为白色，将链接文本颜色更改为黑色。下面的代码只关注改变背景颜色，但我能想到的任何变化都没有发生。有没有人想出正确的方法来覆盖反应组件的 twitter 引导样式？非常感谢您的帮助！

如果您有任何问题或疑虑，请告诉我。

这里是 HTML

  <nav class="navbar navbar-inverse navbar-fixed-top" styleName="navbar-custom">
                <div class="container-fluid">
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="#Home" activeClassName="active"> Home</a></li>
                            <li><a href="#OurMission" activeClassName="active"> Our Mission </a></li>
                            <li><a href="#Projects" activeClassName="active">Projects </a></li>
                        </ul>
                    </div>
                </div>
            </nav>

还有来自 styles.css 的 CSS

.navbar-custom{
   background-color: #ffffff!important;
}

【问题讨论】：

标签： javascript html css twitter-bootstrap reactjs

【解决方案1】：

您正在寻找“className”属性而不是“styleName”。而且，你应该将所有的“class”属性更改为“className”，否则 React 会在解析你的 dom 时抛出警告。

【讨论】：

嘿！谢谢回复。我正在使用允许“类”的 webpack.config，styleName 是用于此 CSSModule 库 (github.com/gajus/react-css-modules#whats-the-problem) 的命名约定，用于获取我的自定义 CSS，并将其链接回我正在使用的外部样式表.
我明白了。所以你可以设置任何其他 CSS 样式就好了？它只是覆盖不起作用的引导程序？并且您可以在开发者工具中看到应用于元素的 .navbar-custom 类？
我想我刚刚发现了这个问题。根据您的建议，我在检查器中检查了更近的元素。似乎背景没有改变，因为（出于我不明白的原因）Twitter Bootstrap 还添加了渐变背景图像。一旦我专门为背景图像执行了覆盖，覆盖就起作用了。坦率地说，没有什么是错的，我只是愚蠢，并没有想到要彻底检查检查员以确保正确的类是压倒一切的。我非常感谢@nuway 的帮助，因为您为我指明了正确的方向。