How to change background colors in Reactstrap - css

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:
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

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

Answer 5

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.