Изменение цвета текста реактивной бутстрапа Navbar с помощью webpack

Я новичок в веб-разработке, и я пытаюсь настроить цвета реактивной загрузки Navbar.Изменение цвета текста реактивной бутстрапа Navbar с помощью webpack

Это содержимое моего NavbarComponent.cs файла:

var React = require('react'); 
var ReactDOM = require('react-dom'); 

import Navbar from 'react-bootstrap/lib/Navbar'; 
import Nav from 'react-bootstrap/lib/Nav'; 
import NavItem from 'react-bootstrap/lib/NavItem'; 
import Button from 'react-bootstrap/lib/Button'; 
import styles from './Navbar.css' 

export default class NavigationBar extends React.Component { 

    render() { 
    return (
     <Navbar brand="react-bootstrap" className={styles.navbar}> 
     <Nav bsStyle="tabs" activeKey="1" onSelect= {this.handleSelect}> 
      <NavItem className={styles.navitem} eventKey={1} href="#">Thing 1</NavItem> 
      <NavItem className={styles.navitem} eventKey={2} href="#">Thing 2</NavItem> 
     </Nav> 
     </Navbar> 
    ); 
    } 
}

и это мой файл переопределения CSS, Navbar.css:

:local(.navbar) { 
    background:#2E5F91; 
    color:white !important; 
} 

:local(.navitem) { 
    color:white !important; 
}

цвет фона меняется NavBar просто отлично , но я не могу изменить цвет текста, даже используя тег !important (что опасно, я знаю).

Глядя на элементы в результирующей странице:

<li role="presentation" class="BV2R0XKa1lLedUhy9CO2p" data-reactid=".1.1.0.0.$/=10"> 
    <a href="#" role="button" data-reactid=".1.1.0.0.$/=10.0">Thing 1</a> 
</li>

это выглядит как мой класс не получает достаточно глубоко. Как я могу это исправить?

Спасибо!

источник

2016-11-18 Megan McPherson

Добро пожаловать в веб-дизайн, надеюсь, вам понравится столько, сколько мы делаем!

Я не знаком с css псевдокласс :local, мне любопытно, почему бы не использовать обычный класс css?

.navItem { 
    color: white; 
}

Я думаю, что компонент NavItem не имеет className свойство (источник: https://react-bootstrap.github.io/components.html#navs-props-navitem)

Так может быть, поэтому он не работает, не уверен, хотя ... Я бы сделал это, как это:

<NavItem eventKey={2} href="#"> 
    <span className="navItem">Thing 2</span> 
</NavItem>

Вот jsfiddle: http://jsfiddle.net/u4g5x93w/1/

источник

2016-11-18 22:38:13

': local' и': global' - это новые псевдоклассы, которые обозначают область применения селекторов CSS. Это действительно хороший способ разделения проблем на модули, вот отличная рецензия на тему https://medium.com/seek-developers/the-end-of-global-css-90d2a4a06284#.oehp2f673 – deiga

вы можете решить эту проблему б y положить

<link rel="stylesheet" href="../Navbar.css">

к index.html в вашем проекте. А также укажите конкретный путь для Navbar.css в вашем index.html. затем отредактируйте, что вам нравится.

источник

2017-03-05 09:06:14

Изменение цвета текста реактивной бутстрапа Navbar с помощью webpack

ответ

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