React Components и переопределять стили бутстранга Twitter

В настоящее время я использую calljsys и twitter bootstrap (для стилей). Я также использую библиотеку CSSModules, найденную HERE, чтобы разрешить внешнюю таблицу стилей. Я был в состоянии не получить ни одного компонента начальной загрузки для правильного стиля, но я борюсь с переопределением стилей Twitter-bootstrap с помощью собственного CSS. В частности, я не могу переопределить класс navbar-inverse со своими собственными стилями. Моя цель - изменить цвет фона на белый, а цвет текста ссылки на черный. приведенный ниже код фокусируется только на изменении цвета фона, но ничего не происходит с любым изменением, о котором я могу думать. Кто-нибудь понял правильный способ переопределить стили бутстрапа twitter для реагирующих компонентов? Ваша помощь будет принята с благодарностью!React Components и переопределять стили бутстранга 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>

и есть CSS от styles.css

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

источник

2016-06-09 Robbie Robinson

Вы ищете "Classname" атрибут вместо "StyleName". И вы должны изменить все свои атрибуты класса на «className», иначе React будет вызывать предупреждения при разборе вашего dom.

источник

2016-06-09 13:57:45 nuway

Эй! Спасибо за ответ. Я использую webpack.config, который допускает «класс», а styleName - это соглашение об именах, используемое для этой библиотеки CSSModule (https://github.com/gajus/react-css-modules#whats-the-problem) для забрать мой собственный CSS и связать его с внешней таблицей стилей, которую я использую. –

Я вижу. Таким образом, вы можете просто установить любые другие стили CSS? Его просто перегрузочный Bootstrap, который не работает? И вы можете увидеть .navbar-custom класс, применяемый к элементу в инструментах разработчика? – nuway

Я думаю, что я только что понял проблему. по вашему предложению я проверил элемент чуть ближе в инспекторе. Кажется, фон не менялся, потому что (по причинам, которые я не понимаю) Twitter Bootstrap также добавляет градиентное фоновое изображение. После того, как я выполнил переопределение специально для фонового изображения, работа над переопределением. Чтобы быть тупым, ничего не случилось, я просто тупой и не думал тщательно проверять инспектора на то, что правильный класс будет переопределять. Я благодарю вас @nuway за вашу помощь, как вы указали мне в правильном направлении. –

React Components и переопределять стили бутстранга Twitter

ответ

Смежные вопросы