时间戳

首页 > 解决方案 > 使用 react-bootstrap 自定义卡片背景

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

问题描述

我正在尝试自定义 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);
}

应该改变什么才能使它起作用？

标签： cssreactjsreact-bootstrap

解决方案

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

<Card className=“customCard”&gt;</Card>

.customCard: {
    background: blue !important;
}

在您的示例中，您没有给卡片一个浅蓝色类，而是尝试为它分配一个背景。

推荐阅读