Unable to apply custom styles to react-bootstrap component using Preact

I have a new Preact project which was generated using preact-cli and the default template.

I'm using Bootstrap components from react-bootstrap.

The default template looks like this:

├── 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

I created a new component with a Card from 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>

In the corresponding style.css in the same directory, I added this:

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

None of these styles seem to be applied. If I inspect the element in Developer Tools, you can see that the class is not applied:

<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>

I wonder if anyone could explain why this is happening, perhaps offering a workaround.