更改 reactstrap 导航栏颜色和属性

Question

当我减小浏览器的大小时，我得到了这个

如你所见，3行符号（我不知道叫什么）是不可见的。我怎样才能把它的颜色变成白色？

我还希望登录按钮位于菜单项下方。这是我的代码

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavbarToggler,
  Collapse,
  NavItem,
  Jumbotron,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Input,
  Label,
} from 'reactstrap';
import { NavLink } from 'react-router-dom';

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isNavOpen: false,
      isModalOpen: false,
    };

    this.toggleModal = this.toggleModal.bind(this);
    this.toggleNav = this.toggleNav.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }

  toggleNav() {
    this.setState({
      isNavOpen: !this.state.isNavOpen,
    });
  }

  toggleModal() {
    this.setState({
      isModalOpen: !this.state.isModalOpen,
    });
  }

  handleLogin(event) {
    this.toggleModal();
    alert(
      'Username: ' +
        this.username.value +
        ' Password: ' +
        this.password.value +
        ' Remember: ' +
        this.remember.checked
    );
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <Navbar style={{ backgroundColor: '#378248' }} expand='md'>
          <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
            <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>
            <ModalBody>
              <Form onSubmit={this.handleLogin}>
                <FormGroup>
                  <Label htmlFor='username'>Username</Label>
                  <Input
                    type='text'
                    id='username'
                    name='username'
                    innerRef={(input) => (this.username = input)}
                  />
                </FormGroup>
                <FormGroup>
                  <Label htmlFor='password'>Password</Label>
                  <Input
                    type='password'
                    id='password'
                    name='password'
                    innerRef={(input) => (this.password = input)}
                  />
                </FormGroup>
                <FormGroup check>
                  <Label check>
                    <Input
                      type='checkbox'
                      name='remember'
                      innerRef={(input) => (this.remember = input)}
                    />
                    Remember me
                  </Label>
                </FormGroup>
                <Button type='submit' value='submit' color='primary'>
                  Login
                </Button>
              </Form>
            </ModalBody>
          </Modal>
          <div className='container'>
            <NavbarToggler onClick={this.toggleNav} />
            <Collapse isOpen={this.state.isNavOpen} navbar>
              <Nav navbar>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/home'
                  >
                    <span className='fa fa-home fa-lg'></span> Home
                  </NavLink>
                </NavItem>

                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/gallery'
                  >
                    <span className='fa fa-list fa-lg'></span> Gallery
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/contactus'
                  >
                    <span className='fa fa-address-card fa-lg'></span> Contact
                    Us
                  </NavLink>
                </NavItem>
              </Nav>
            </Collapse>
            <Nav className='ml-auto' navbar>
              <NavItem>
                <Button
                  outline
                  style={{ backgroundColor: '#fff' }}
                  onClick={this.toggleModal}
                >
                  <span className='fa fa-sign-in fa-lg'></span> Login
                </Button>
              </NavItem>
            </Nav>
          </div>
        </Navbar>
        <Jumbotron style={{ backgroundColor: '#5b9153' }}>
          <div className='container'>
            <div className='row row-header'>
              <div className='col-12 col-sm-6'>
                <h1>I Love Aristi</h1>
                <p>A place built for God!</p>
              </div>
            </div>
          </div>
        </Jumbotron>
      </div>
    );
  }
}

export default Header;

有什么想法吗？

谢谢，西奥.

Answer 1

您需要在 CSS 文件中自定义 .navbar-toggler 和 .navbar-toggler-icon，因为您没有为 navbar 使用 Bootstrap 主题（例如, navbar-light) 这就是汉堡包按钮未正确显示的原因 - 因为它的 CSS 定义主要取决于导航栏使用的 Bootstrap 主题。

因此，您可以使用类似的东西：

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255);
}

至于登录 Button，将其放在 Collapse 组件中，使其位于 collapsible/expandable 导航栏

的组中

<Collapse isOpen={this.state.isNavOpen} navbar>
  <Nav navbar className="w-100">
    ...
    <NavItem className="d-md-block ml-md-auto">
      <Button
        outline
        style={{ backgroundColor: "#fff" }}
        onClick={this.toggleModal}
      >
        <span className="fa fa-sign-in fa-lg"></span> Login
      </Button>
    </NavItem>
  </Nav>
</Collapse>

看看我的代码片段中 Nav 和 NavItem 的 className。 w-100是为了让Nav占满整个space。 d-md-block 和 ml-md-auto 在那里，这样您的登录按钮将在中型设备上推到右侧并向上推，但在小型设备上将与左侧对齐。

更改 reactstrap 导航栏颜色和属性

Changing reactstrap navbar color and properties

reactjs

reactstrap