无法使用Preact将自定义样式应用于react-bootstrap组件

Question

我有一个新的Preact项目，该项目是使用preact-cli和默认模板生成的。

我正在使用react-bootstrap中的Bootstrap组件。

默认模板如下：

├── assets
├── components
│   ├── app.js
│   └── header
│       ├── index.js
│       └── style.css
├── index.js
├── manifest.json
├── routes
│   ├── home
│   │   ├── index.js
│   │   └── style.css
│   └── profile
│       ├── index.js
│       └── style.css
│       └── style.css
└── style
    └── index.css

我使用Card中的react-bootstrap创建了一个新组件：

<Card as="a" href="#" class={style.customCard}>
    <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
            Some quick example text to build on the card title.
        </Card.Text>
    </Card.Body>
</Card>

在同一目录中的相应style.css中，我添加了以下内容：

.customCard {
    background-color: red;
    border: 5px solid red;
    color: red;
}

似乎未应用这些样式。如果检查开发人员工具中的元素，您会看到该类未应用：

<a href="#" class="card">
    <div class="card-body">
        <div class="card-title h5">Card Title</div>
        <p class="card-text">
            Some quick example text to build on the card title.
        </p>
    </div>
</a>

我想知道是否有人可以解释为什么会发生这种情况，也许提供一种解决方法。