如何在Reactstrap中更改背景颜色

Question

我正在使用react strap来帮助样式化我正在创建的应用程序，但是我无法弄清如何将导航栏的背景颜色从白色更改为黑色。我已经尝试在nav选项卡标签中使用color ="dark"，但没有效果。有什么帮助吗？

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

- shak.s

Answer 1

reactstrap文档不太清楚，因此我只看到这里有两个选项：

1. 在组件中使用内联样式

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

2. 或通过css-modules使用

   import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav> 在其中定义你的样式 .Component{ background-color: #f1f1f1 }

注意：有时候css-modules不足以覆盖bootstrap的样式，但使用内联样式可以帮助解决问题。

- Nikita Neganov

Answer 2

实用类仍可与reactstrap一起使用。只需在父元素上使用className='bg-dark'，您就可以获得深色背景。

- Devin Bombay

---

这应该是被接受的答案，不幸的是reactstrap文档根本没有解释如何使用className。它似乎与常规bootstrap中的"class"完全相同。如果您尝试通过其他解决方法直接更改类，则reactstrap通常会破坏css。 - Tyk

Answer 3

你可以创建一个带有自定义CSS的类，并将它们标记为!important，从而覆盖默认样式。

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

- kooskoos

---

谢谢，这确实有帮助！ - Poliakoff

Answer 4

一种使用 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>
);

- RafaelFigueiredo

Answer 5

根据文档，对于作为输入的 AvField，有像 inputClass 和 labelClass 这样的属性，可以帮助您分别管理文本框和标签的样式。

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

至于输入组件，您可以使用className和cssModule进行样式设计。

- Tron