反応ストラップを使用して、作成しているアプリケーションのスタイルを整えていますが、ナビゲーションの背景色を白から黒に変更する方法がわかりません。 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>
);
}
}
reactstrapには明確なドキュメントがないため、ここには2つのオプションしかありません。
コンポーネントでインラインスタイルを使用するだけです
<Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>
または、css-modulesを使用して
import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav>
cssでctyleを定義する場所.Component{ background-color: #f1f1f1 }
注:css-modulesでは、bootstrap=スタイリングをオーバーライドするには不十分な場合がありますが、インラインスタイルが役立つはずです
ユーティリティクラスは引き続きreactstrapで動作します。親要素でclassName='bg-dark'
を使用するだけで、暗い背景が得られます。