web-dev-qa-db-ja.com

Reactstrapで背景色を変更する方法

反応ストラップを使用して、作成しているアプリケーションのスタイルを整えていますが、ナビゲーションの背景色を白から黒に変更する方法がわかりません。 nav tabsタグで= "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>
        );
      }
    }
cssreactjstwitter-bootstrapreactstrap
7
shak.s

reactstrapには明確なドキュメントがないため、ここには2つのオプションしかありません。

  1. コンポーネントでインラインスタイルを使用するだけです

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

  2. または、css-modulesを使用して

    import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav> cssでctyleを定義する場所.Component{ background-color: #f1f1f1 }

注：css-modulesでは、bootstrap=スタイリングをオーバーライドするには不十分な場合がありますが、インラインスタイルが役立つはずです

10
Nikita Neganov

ユーティリティクラスは引き続きreactstrapで動作します。親要素でclassName='bg-dark'を使用するだけで、暗い背景が得られます。

6
Devin Bombay