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

score 21 · Accepted Answer · answered Oct 10 '18 at 10:34

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

Just use inline styles in the components

<Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>
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

score 14 · Answer 2 · edited Oct 08 '19 at 09:36

14

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

edited Oct 08 '19 at 09:36

nima

7,796
12
36
53

answered Dec 21 '18 at 16:02

Devin Bombay

166
1
3

This should be the accepted answer, sadly reactstrap documentation does not explain how to use className at all. It seems to function exactly as "class" does in regular bootstrap. Reactstrap will often break the css if you try to change classes directly through other workarounds. – Tyk Nov 30 '21 at 19:29

score 1 · Answer 3 · answered Nov 20 '19 at 04:21

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

score 1 · Answer 4 · answered May 24 '21 at 14:18

1

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

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

answered May 24 '21 at 14:18

kooskoos

4,622
1
12
29

Thank you, this helps indeed! – Poliakoff Sep 29 '21 at 17:05

score 0 · Answer 5 · answered Jun 08 '20 at 01:21

According to the documentation, for AvField as Input, there are props like inputClass and labelClass that helps you to manage styling for text-box and label respectively.

<AvField 
     name="member_name"
     label="Team Member Name"
     inputClass="bg-gradient-primary"
     type="text"
     placeholder="Name of Team Member"
     onChange={this.handleChange}
/>

And for Input Component, you can use className and cssModule for styling purpose.

How to change background colors in Reactstrap

5 Answers5