17

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

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

4

7 回答 7

14

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

道具

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

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

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

custom-class可以的 CSS 类在哪里

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

摆弄如何使用的例子bsClass。

内联样式：

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

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

但问题指出：

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

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

于 2016-11-22T11:48:23.073 回答
8

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

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

或者

<Button bsStyle="default" style={{color:"blue"}}>Button Text</Button>
于 2017-09-08T11:58:39.220 回答
6

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%;
  }
}
于 2020-12-08T21:04:03.643 回答
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。

于 2021-10-03T16:23:07.950 回答
0

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

.form-control { 
  border-radius: 30px !important;
  background-color: #f4f6f5 !important;
}
于 2021-03-31T11:50:03.123 回答
0

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;
    }
`;
于 2021-07-31T10:45:01.557 回答
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;} 编辑组件样式

于 2021-12-22T14:59:44.173 回答