如何在 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 个选项:

    只需在组件中使用内联样式

    &lt;Nav style=backgroundColor: '#f1f1f1'&gt;Something&lt;/Nav&gt;

    或者通过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 作为输入,有像 inputClasslabelClass 这样的道具可以帮助您管理文本样式-分别是盒子和标签。

<AvField 
     name="member_name"
     label="Team Member Name"
     inputClass="bg-gradient-primary"
     type="text"
     placeholder="Name of Team Member"
     onChange=this.handleChange
/>

对于 Input 组件,您可以使用 classNamecssModule 进行样式设置。

【讨论】:

以上是关于如何在 Reactstrap 中更改背景颜色的主要内容,如果未能解决你的问题,请参考以下文章

如何在卡片内的按钮上进行 onclick 事件:更改卡片背景颜色、按钮背景和文本颜色以及文本内容

选中时更改 UICollectionView 单元格的背景和标签颜色

vscode自定义背景颜色

选择时 UITableViewCell 背景颜色中的目标 c 子视图

如何使用 Swift 5 在 SwiftUI 中将颜色与 RGB 或十六进制值一起使用? [复制]

如何在 iPhone 中更改 UIPickerView 的背景颜色