如何在 Reactstrap 中更改背景颜色
Posted
技术标签:
【中文标题】如何在 Reactstrap 中更改背景颜色【英文标题】:How to change background colors in Reactstrap 【发布时间】:2018-12-31 10:17:03 【问题描述】:我正在使用 react strap 来帮助设置我正在创建的应用程序的样式,但是我不知道如何将导航的背景颜色从白色更改为黑色。我试图在导航标签标签中为“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>
);
【问题讨论】:
【参考方案1】:reactstrap 没有明确的文档,所以我在这里只看到 2 个选项:
只需在组件中使用内联样式
<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
注意:css-modules 有时不足以覆盖引导样式,但内联样式应该会有所帮助
【讨论】:
【参考方案2】:实用程序类仍然可以与 reactstrap 一起使用。只需在父元素上使用className='bg-dark'
,您就会得到深色背景。
【讨论】:
这应该是公认的答案,遗憾的是 reactstrap 文档根本没有解释如何使用 className。它的功能似乎与常规引导程序中的“类”完全一样。如果您尝试通过其他变通方法直接更改类,Reactstrap 通常会破坏 css。【参考方案3】:使用样式组件的方法:
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>
);
【讨论】:
【参考方案4】:您可以使用自定义 css 创建一个类并将它们标记为!
important。从而覆盖默认样式。
.custom-btn
background: #000 !important;
【讨论】:
谢谢,这确实有帮助!【参考方案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
/>
对于 Input 组件,您可以使用 className 和 cssModule 进行样式设置。
【讨论】:
以上是关于如何在 Reactstrap 中更改背景颜色的主要内容,如果未能解决你的问题,请参考以下文章
如何在卡片内的按钮上进行 onclick 事件:更改卡片背景颜色、按钮背景和文本颜色以及文本内容
选中时更改 UICollectionView 单元格的背景和标签颜色
选择时 UITableViewCell 背景颜色中的目标 c 子视图