twitter-bootstrap 如何在 Reactstrap 中更改背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51487650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background colors in Reactstrap
提问by shak.s
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?
我正在使用反应带来帮助设计我正在创建的应用程序的样式，但是我不知道如何将导航的背景颜色从白色更改为黑色。我试图在导航选项卡标签中为 ="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>
);
}
}
回答by Nikita Neganov
reactstrap doesn't have clear documentation, so I only see here 2 options:
reactstrap 没有明确的文档，所以我在这里只看到 2 个选项：
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 }
只需在组件中使用内联样式
<Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>或者通过使用 css-modules
import styles from './Component.module.css' <Nav className={styles.Component}>Something</Nav>你在 css 中定义你的 ctyles 的地方.Component{ background-color: #f1f1f1 }
Note: css-modules sometimes is not enough to override bootstrap styling, but inline styles should help
注意：css-modules 有时不足以覆盖引导程序样式，但内联样式应该有帮助
回答by Devin Bombay
Utility classes still work with reactstrap. Just use className='bg-dark'on the parent element, and you'll get your dark background.
实用程序类仍然适用于 reactstrap。只需className='bg-dark'在父元素上使用，您就会得到深色背景。
回答by RafaelFigueiredo
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>
);
