Estoy tratando de averiguar cómo puedo aplicar un estilo a un reaccionan levanta NavBar.
Añadido jsfiddle aquí. https://jsfiddle.net/pdqzju1e/1/
De tener algún problema en el funcionamiento de la jsfiddle con reaccionar-bootstrap. Funciona en mi establecido localmente en el ambiente.

const navbar = {backgroundColor: '#F16E10'};
export default class NavigationBar extends React.Component {
  render() {
    return (
      <div>
        <Navbar style={navbar}>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="/">Test App</a>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav style={navbar}>
              <NavItem eventKey={1} href="#">Link1</NavItem>
              <NavItem eventKey={2} href="#">Link2</NavItem>
            </Nav>
            <Nav pullRight>
              <NavItem eventKey={1} href="#">Link3</NavItem>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

El anterior solo parece funcionar para Nav componente y no NavBar.
Hay alguna solución para esto?

  • Podrías editar tu post para agregar un JsFiddle? Iba a hacer la depuración mucho más fácil.
  • Añadido jsfiddle enlace. A pesar de tener un problema de conseguir que se ejecute con bootstrap. jsfiddle.net/pdqzju1e/1
InformationsquelleAutor Akshay | 2016-12-13

3 Comentarios

  1. 2

    Para mí el problema era que la imagen de fondo era que se establece un gradiente lineal en uno de los zapatos de las hojas de estilo. imagen de fondo se toma precedencia sobre fondo de color. Primordial que el uso de los siguientes trabajó para mí:

    /* override bootstrap navbar colors */
    .navbar,
    .navbar-default {
        background-image: linear-gradient(to bottom,#2c4053 0,#2c4053 100%) !important; /* override background image gradient w/flat color */
    }

    Creo que esto también debería haber funcionado, pero no para mí.

    .navbar,
    .navbar-default {
        background-image: none !important;
    }

    Estoy seguro de que hay una mejor manera de lograr esto, sin embargo…

  2. 0

    Hola Akshay usted puede dirigirse a la navbar-header clase para reemplazar sus atributos css. He aquí un jsBin demo.

    .navbar-header {
      background-color: #F16E10;
    }

    Si que hizo el truco para usted, a continuación, me gustaría recomendar a jugar con Chrome devtools: la inspección de elementos y cambiar sus estilos para ver que clases css que te gustaría destino.

  3. 0

    usted puede cambiar el color de MenuItem o NavItem aquí

     .navbar-default .navbar-nav > li > a {
          color: white;
        }

    Básica truco es ir a dev-herramienta y comprobar las propiedades de css y puede hacer cualquier cosa.

Dejar respuesta

Please enter your comment!
Please enter your name here