如何自定义 react-bootstrap 组件？

Posted 2023-02-21

【中文标题】如何自定义 react-bootstrap 组件？

【英文标题】：How to customise react-bootstrap components?

【发布时间】：2017-04-05 22:17:56

【问题描述】：

覆盖 css 类/自定义 react-bootstrap 组件的最佳方法是什么？ - （我已阅读文档，除非我遗漏了什么，否则不包括在内）。

从我的阅读来看，它似乎是在内联样式（镭）和 css 模块之间进行选择，但哪个更好，为什么？

【问题讨论】：

主题是主观的。你可以根据你的需要去任何你想要的方式。在我们的例子中，遗留代码使用less。所以我们不得不从 bootstrap 的源代码中覆盖 variables.less。我们创建了自己的 variables.less 文件，该文件将覆盖 @brandPrimary 等变量，这是著名的引导程序原色。

【参考方案1】：

我不确定这是否能回答您的问题，但Documentation 清楚地提供了示例。比如Button

道具

+--------+---------+--------+---------- ------------------------------------+ |姓名 |类型 |默认|说明 | +--------+---------+--------+---------- ------------------------------------+ |bs类 |字符串 | 'btn' |组件的基本 CSS 类和前缀| +--------+---------+--------+---------- ------------------------------------+

可以修改这个以将自定义 CSS 类添加到您的 Button 组件。也可以通过设置 componentClass 来更改组件。

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

custom-class 是 CSS 类，可以

为组件提供新的、非 Bootstrap 的 CSS 样式。

Fiddle 举例说明如何使用bsClass。

内联样式：

据bug填，官方不支持内联样式。

您想使用实际的样式道具。 bsClass 用于调整 引导 css 类应用于非内联组件的方式 样式

但issue 声明：

如果需要，您可以随意使用它们。我们没有正式的意见。

注意 并非所有 react-bootstrap 提供的组件都允许通过 bsClass 自定义类，例如 Breadcrumb

【讨论】：

我不确定这是否完全正确 - react-bootstrap.github.io/components.html#custom-styles.

@AloeVeraForty 我认为这取决于您的具体情况。两者都有效。

啊，好吧，我发现您使用的是 'style' 属性而不是 bsClass - 感谢您的帮助

@AloeVeraForty 链接已损坏。

作为 CoViD-19 的年份，正确的 prop 是 bsPrefix

【参考方案2】：

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

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

或

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

【参考方案3】：

SCSS 示例

根据 React Bootstrap Docs，您可以使用属性 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%;
  

【参考方案4】：

我有同样的问题，我搜索了几个博客，我得到的答案是 !important。 我一直在寻找更通用的解决方案，但除了将 !important 添加到我们要覆盖的每个元素之外，还没有找到任何其他解决方案。

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

【参考方案5】：

React-bootstrap 上面有 NavLink 组件，你必须先导入它。

当您使用类似 rt4-nav 的方式为 navlink 生成 Boostrap 代码时，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;
    
`;

【讨论】：

感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地了解正在发生的事情，尤其是那些刚接触该语言并难以理解概念的社区成员。

【参考方案6】：

您应该先导入。举个例子，如果你的导入顺序是这样的：

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

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

但如果你这样写：

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

您可以随意覆盖 Bootstrap。

【参考方案7】：

你可以在 react-bootstrap 网站上搜索具体的组件：

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

在每个页面的底部都有一个 API 部分，它给出了 bsPrefix 的默认值。然后，您可以在 CSS 文件中更改此默认值。

例如，Button 和 Tooltip 组件的默认 bsPrefix 分别为 'btn' 和 'tooltip'。在 CSS 文件中，您可以使用 .btnbackground-color: Purple; 或 .tooltipbackground-color: Purple;

编辑组件样式

【讨论】：

为了清楚起见，您的答案中编写的任何代码都应该格式化。