如何为 react-bootstrap 组件添加自定义 Styles？

Question

我在我的项目中使用了 react-bootstrap。 在下面的代码中，我试图将背景颜色添加到卡片中。

=> js文件

import React from "react";
import "../assets/css/material-dashboard.css";
import { Accordion, Button, Card } from "react-bootstrap";
import { Header, Container } from "semantic-ui-react";
import TabContent from "./TabContent";
import SubmitButton from "./SubmitButton";
import "../../src/assets/css/collapse.css";

const AddMock = () => {
  return (
    <div class="row">
      <Accordion style={{ paddingLeft: "32px" }}>
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Options
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container>
                <Header as="h3">Hierarchy</Header>
                <TabContent />
                <SubmitButton />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

export default AddMock;

这就是我所指的风格，

=> 崩溃.css

.card .card-header .collapseStyle {
  background-color: cornflowerblue;
}

看起来这张卡实际上并没有使用我分配给它的自定义 CSS。 我可以知道将自定义样式添加到 react-bootstrap 组件的最佳实践吗？

Answer 1

您已将 className 添加到卡中，因此 CSS 选择器将为：

.card.collapseStyle .card-header  {
  background-color: cornflowerblue;
}