How to change background colors in Reactstrap

Question

I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs tag but that hasn't work. Any help?

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>
        );
      }
    }

Answer 1

reactstrap doesn't have clear documentation, so I only see here 2 options:

1. Just use inline styles in the components

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

2. Or use css-modules through

   import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav> where you define your ctyles in css .Component{ background-color: #f1f1f1 }

Note: css-modules sometimes is not enough to override bootstrap styling, but inline styles should help

Answer 2

Utility classes still work with reactstrap. Just use className='bg-dark' on the parent element, and you'll get your dark background.

Answer 3

An approach using styled-components:

const MastHeadJumboTron = styled.div`
  &.jumbotron {
    background: #000;
  }
`;

const MastHead = () => (
  <Jumbotron as={MastHeadJumboTron} fluid>
    <Container>
      <h1>May the force be with you!</h1>
      <input placeholder="Filter People" />
    </Container>
  </Jumbotron>
);

Answer 4

You can create a class with your custom css and mark them !important. Thus over-riding the default styling.

.custom-btn {
  background: #000 !important;
}