使用 react-bootstrap 自定义卡片背景答案

【问题标题】：Customize card background with react-bootstrap使用 react-bootstrap 自定义卡片背景
【发布时间】：2020-09-04 16:57:28
【问题描述】：

我正在尝试自定义 react-bootstrap/cards 的 bg 属性，即使用默认的主要、次要、危险等变体以外的东西。根据文档，可以通过提供带有“card-”bsprefix的自定义道具来完成类似的事情，但我似乎无法让它工作。

我当前的代码是这样的：

    <Card bg="light-blue">
       <Card.Body >
          <Card.Text >
            foobar
           </Card.Text>
        </Card.Body>
    </Card>

我从一个 .css 文件中定义了以下样式

.card-light-blue {
  background-color: rgb(147, 182, 248);
}

应该进行哪些更改才能使其正常工作？

【问题讨论】：

【解决方案1】：

尝试给卡片一个 className 并使用这个类给它一个背景颜色。如果仅此一项不起作用，请尝试添加 !important

<Card className=“customCard”></Card>

.customCard: {
    background: blue !important;
}

在您的示例中，您没有为卡片指定浅蓝色类，而是尝试为其指定背景。

【讨论】：

【解决方案2】：

导入“文件.css”

<Card className="card">
       <Card.Body >
          <Card.Text >
            foobar
           </Card.Text>
        </Card.Body>
    </Card>

css文件

.card{

    background-color: aqua;
}

只需添加一个className并在css文件中修改即可；

【讨论】：

【解决方案3】：

我认为不使用!important 的更好方法是为卡分配一个自定义类，然后针对 react-bootstrap 卡类和您的自定义类。这应该覆盖 react-bootstrap 样式。

卡片组件：

<Card className="custom-class">
  <Card.Body >
    <Card.Text >
      some text
    </Card.Text>
  </Card.Body>
</Card>

css 文件：

.card.custom-class {
  background-color: red;
}

【讨论】：