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

Answer 1

You can define what you pull in by creating a styles.scss file and only including the date-picker theme:

In your styles.scss file add something like:

@use '@angular/material' as mat;

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.core();
@include mat.datepicker-theme($my-theme);

You will then need to include this file in the styles array in your angular.json.