如何定制React-Bootstrap组件？

Question

如何定制React-Bootstrap组件？

reactjsreact-bootstrapinline-stylesreact-css-modules

24

什么是最佳的方法来覆盖CSS类/自定义React-Bootstrap组件？ - （我已经阅读了文档，除非我漏掉了什么，否则没有涵盖此内容）。

从我所阅读的内容来看，似乎可以选择使用内联样式（Radium）和CSS模块，但哪种更好，为什么呢？

- AloeVeraForty

1

这个话题是主观的。根据您的需求，您可以选择任何方式。在我们的情况下，遗留代码使用了 less。因此，我们不得不覆盖 bootstrap 源代码中的 variables.less。我们创建了自己的 variables.less 文件，它将覆盖变量，如 @brandPrimary，这是著名的 bootstrap 主要颜色。 - Mihir

8个回答

9

我认为对于大多数人（例如我），可以使用style属性向React-Bootstrap组件添加自定义样式。例如，对于带有蓝色文本的默认按钮：

<Button bsStyle="default" style={style.blueButton}>Button Text</Button>

或者

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>

- Peter Evans

7

使用 SCSS 的示例

根据 React Bootstrap 文档，您可以创建一个带有属性 bsPrefix="custom-class" 的自定义类。

然后在您的样式表中，您可以利用 CSS 特定性来覆盖样式。

 import styles from './RocketCard.module.scss';

 function RocketCard({ name }) { return (
     <div className={styles.rocketCardContainer}>
      {name}
      <Card className={styles.customCard} bsPrefix="customCard">
        <Card.Img variant="top" src="holder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and 
            make up the 
            bulk of the card's
            content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
     </div>
    );
    }



// SCSS File
.rocketCardContainer {
  background-color: red;
  .customCard {
    width: 100%;
  }
}

- Carlos Mori

0

您可以在 react-bootstrap 网站上搜索特定组件：

https://react-bootstrap.netlify.app/components/alerts

每个页面底部都有一个API部分，其中提供了bsPrefix的默认值。您可以在CSS文件中更改此默认值。

例如，Button和Tooltip组件的默认bsPrefix分别为“btn”和“tooltip”。在CSS文件中，您可以使用.btn {background-color：purple;}或.tooltip {background-color：purple;}编辑组件样式。

- gusbus

为了更好地理解，请确保你回答中的任何代码都被格式化良好。 - Anuj Raghuvanshi

0

import 'bootstrap/dist/css/bootstrap.min.css';
import classes from './signInForm.module.css'

对我很有效，非常感谢。

- hiren savani

0

React-bootstrap在其中有一个NavLink组件，你首先需要导入它。

当你使用类似rt4-nav这样的东西生成导航链接的Bootstrap代码时，NavLink组件会带有className="nav-link"，其中包含了所有的样式，然后你可以按照下面的示例覆盖该类。

import 'bootstrap/dist/css/bootstrap.min.css'; import { NavLink } from 'react-bootstrap';

  <NavMenu className="d-flex">
      <NavLink className="nav-link">
          Inspirations
      </NavLink>
  </NavMenu>

const NavMenu = styled.div`
    .nav-link {
        font-size: 15px;
        font-weight: 500;
    }
`;

- Sima Nongwe

1

感谢您提供答案。您是否可以编辑您的答案并包含代码解释？这将有助于未来的读者更好地理解正在发生的事情，特别是那些对该语言感到陌生并且难以理解概念的社区成员。 - Jeremy Caney

0

你应该先进行导入。例如，如果你的导入顺序如下：

import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';

在 index.css 中编写的内容将无效，除非它们带有 !important。

但如果您这样编写：

import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';

您可以随意覆盖Bootstrap。

- requizm

0

我遇到了同样的问题，我查阅了几篇博客，得到的答案是使用 !important。我一直在寻找更通用的解决方案，但除了在每个要覆盖的元素中添加 !important 之外，没有找到其他解决方案。

.form-control { 
  border-radius: 30px !important;
  background-color: #f4f6f5 !important;
}

- Abhishek Patel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wolendranh · Accepted Answer

我不确定这是否回答了您的问题，但文档清楚地提供了示例。例如按钮

Props

+--------+---------+--------+--------------------------------------------+
|  Name  |  Type   | Default| Description                                |
+--------+---------+--------+--------------------------------------------+
|bsClass |  string | 'btn'  | 组件的基础CSS类和前缀                            |
+--------+---------+--------+--------------------------------------------+

可以修改此代码以向您的Button组件添加自定义CSS类。还可以使用设置componentClass更改组件。

<Button type="submit" onClick={this.submit}
 bsClass='custom-class'
>
</Button>

在这里，custom-class是一种CSS类，用于为组件提供新的非Bootstrap CSS样式。

bsClass的使用示例，请参见此处。

内联样式:

根据错误填报，官方不会支持内联样式。

如果你想使用实际的style属性，那么可以使用bsClass来调整bootstrap css类应用到组件上，而不是内联样式

但问题报告声明：

如果您想要使用它们，则可以自由使用。我们没有正式意见。

注意并非所有由react-bootstrap提供的组件都允许通过bsClass进行类定制，例如面包屑。