web-dev-qa-db-fra.com

Comment changer les couleurs d'arrière-plan dans Reactstrap

J'utilise React Strap pour aider à styliser une application que je crée, mais je ne sais pas comment changer la couleur d'arrière-plan de la navigation du blanc au noir. J'ai essayé de color = "dark" dans la balise nav tabs mais cela n'a pas fonctionné. De l'aide?

import React, { Component } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';

    export default class nav extends React.Component{

     constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
          dropdownOpen: false
        };
      }

      toggle() {
        this.setState({
          dropdownOpen: !this.state.dropdownOpen
        });
      }

      render() {
        return (
          <div>
            <Nav tabs>
              <NavItem>
                <NavLink href="/" active>blank.</NavLink>
              </NavItem>
              <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle nav caret>
                  Dropdown
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem header>Header</DropdownItem>
                  <DropdownItem disabled>Action</DropdownItem>
                  <DropdownItem>Another Action</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Another Action</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <NavItem>
                <NavLink href="#">Link</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="#">Another Link</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="#">Disabled Link</NavLink>
              </NavItem>
            </Nav>
          </div>
        );
      }
    }
cssreactjstwitter-bootstrapreactstrap
7
shak.s

reactstrap n'a pas de documentation claire, donc je ne vois ici que 2 options:

  1. Utilisez simplement des styles en ligne dans les composants

    <Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>

  2. Ou utilisez les modules css via

    import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav> où vous définissez vos ctyles dans css .Component{ background-color: #f1f1f1 }

Remarque: les modules css ne suffisent parfois pas pour remplacer bootstrap style, mais les styles en ligne devraient aider

10
Nikita Neganov

Les classes utilitaires fonctionnent toujours avec reactstrap. Utilisez simplement className='bg-dark' sur l'élément parent, et vous obtiendrez votre arrière-plan sombre.

6
Devin Bombay