How to import css for Angular Material Datepicker?

Question

I'm using Bootstrap for my angular project.

In my angular.json, I added bootstrap like this:

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],

I need to add a datepicker to my project.

Angular Material provides a datepicker. In order to use it, I had to install Angular Material:

ng add @angular/material

Among other things it adds CSS styles to the project.

When I select Indigo-Pink as a theme, it adds this to the styles:

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.css",
    ],

Problem: This overwrites my Bootstrap styles and breaks some things. For example, my links styled with the class "nav-link" can't be clicked anymore.

However, the datepicker works fine:

Question: Is there a way to import the CSS for Angular Material Datepicker without overwriting Bootstrap?

What I tried so far

I took a look at node_modules and I found a datepicker-theme.scss in

./node_modules/@angular/material/datepicker/_datepicker-theme.scss

and I tried to include only that file in my styles, like this:

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "./node_modules/@angular/material/datepicker/_datepicker-theme.scss",
    ],

While the datepicker works, it looks weird:

I probably have to import more files but which files could it be?

Angular CLI: 14.2.5

Node: 16.10.0

Angular: 14.2.5