mat-datepicker rendering issue after migrating to Angular 18 and Material M3

I recently migrated my Angular application to version 18 and updated Angular Material to version M3. After the migration, I'm experiencing a rendering issue with the mat-datepicker component.

As shown in the attached image the mat-datepicker is not displaying correctly.



Here's a summary of my setup:

• Angular Version: 18
• Angular Material Version: 18.2.14 (M3)
• I have imported the necessary modules in my module:
  import { MatDatepickerModule } from '@angular/material/datepicker';
  import { MatInputModule } from '@angular/material/input';
  import { MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
  import { MatFormFieldModule } from '@angular/material/form-field';
• I have defined and included a Material M3 theme in my styles.scss and m3-theme.scss files.

Here's my styles.scss:

@use '@angular/material' as mat;
@use '@angular/cdk' as cdk;
@use './m3-theme' as theme;

@use "app/form";
@use "app/table";

@include cdk.overlay();

:root {
@include mat.all-component-themes(theme.$light-theme);
@include mat.all-component-typographies()
}

.cdk-overlay-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000; // Assicurati che sia sopra gli altri elementi
}

html,
body {
height: 100%;

}

body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
background-color: #fafafa;
}

.header-row {
background-color: #f7f7f7 !important;
}

.valid-attach {
color: #21bf73;
}

.invalid-attach {
color: #ed6663;
}

.warn {
color: #{theme.$error-color};
font-weight: bold;
}

.pending-attach {
color: goldenrod;
}

.page-title-container {
height: 48px;
position: relative;
width: 100%;
z-index: 3;
padding: 15px;
}

.page-title {
font-size: 20px;
color: #2c2c2c;
padding: 0 0 0 15px;
margin: 0;
display: inline;
font-weight: 500;
}

// Nasconde l'effetto hover sbagliato dei mat-radio-group
.mat-ripple-element {
display: none !important;
}

.icon-black {
color: #2c2c2c !important;
}

.header-with-icon {
position: relative;
padding-top: 4px;
mat-icon {
position: relative;
padding-right: 2px;
}
span {
position: absolute;
padding-top: 6px;
}
}

.dialog-content {
padding: 40px;
}

// Forza l'applicazione dei colori sui componenti Material
.mat-mdc-toolbar.mat-primary {
--mdc-toolbar-container-color: #{theme.$primary-color};
--mat-toolbar-container-color: #{theme.$primary-color};
background-color: #{theme.$primary-color};
}

.mdc-button--raised.mat-primary {
--mdc-protected-button-container-color: #{theme.$primary-color};
}

.mat-mdc-raised-button.mat-primary {
--mdc-protected-button-container-color: #{theme.$primary-color};
}

.mat-mdc-tab.mat-mdc-tab-active {
--mat-tab-header-active-ripple-color: #{theme.$primary-color};
--mat-tab-header-inactive-ripple-color: #{theme.$primary-color};
}

.mat-mdc-select-panel {
--mdc-theme-surface: white;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.12);
}

.mat-mdc-select-value {
color: rgba(0, 0, 0, 0.87);
}

.mat-mdc-select-arrow {
color: rgba(0, 0, 0, 0.54);
}

.mat-mdc-nav-list {
background-color: white !important;
}

.mdc-list-item:hover {
background-color: lightgray;
}

.mat-mdc-option.mat-mdc-option-active,
.mat-mdc-option:hover:not(.mat-mdc-option-disabled) {
background-color: #{theme.$primary-color};
}

.mat-mdc-option.mat-mdc-selected:not(.mat-mdc-option-multiple):not(.mat-mdc-option-disabled) {
background-color: #{theme.$primary-color};
}

// Per il bordo focused
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
color: #{theme.$primary-color};
}

.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
color: rgba(0, 0, 0, 0.54);
}

.mat-mdc-form-field-error {
color: #{theme.$error-color} !important;
}

.mat-mdc-form-field-invalid {
color: #{theme.$error-color} !important;
}

// Per assicurarsi che il menu dropdown sia visibile
.cdk-overlay-pane {
background-color: white;
}

.mat-mdc-icon-button:hover {
background-color: lightgray;
}

.mat-mdc-button {
color: #{theme.$primary-color};
}

.mat-mdc-button-touch-target

.mat-mdc-button.primary,
.mat-mdc-raised-button.primary,
.mat-mdc-unelevated-button.primary,
.mat-mdc-outlined-button.primary,
.mat-mdc-mini-fab.primary {
color: white !important;
background-color: #{theme.$primary-color} !important;
}

.mat-mdc-button.warn,
.mat-mdc-raised-button.warn,
.mat-mdc-unelevated-button.warn,
.mat-mdc-outlined-button.warn,
.mat-mdc-mini-fab.warn {
color: white !important;
background-color: #{theme.$error-color} !important;
}

button .mat-icon.primary,
.mat-mdc-button .mat-icon.primary {
color: white !important;
}

.mat-mdc-tab-list {
border: none !important;
box-shadow: none !important; // Se ci fosse un'ombra
}

.mat-mdc-card-outlined {
border: none !important;
}

.mat-mdc-tab-label-container {
border-style: none !important;
}

.mat-mdc-calendar {
background-color: white;
border: 10px solid red;
}

@media (max-width: 500px) {
.full-page-container {
margin: 0;
}

.page-title-content {
margin-top: 17px;
}

.full-page-content {
padding: 0;
}
}



And here's the content of my m3-theme.scss:


@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #0559a3, secondary: #0559a3, tertiary: #0559a3, neutral: #a1b2ff
$_palettes: (
primary: (
0: #000000,
10: #001c3a,
20: #00315e,
25: #003c72,
30: #004785,
35: #00539a,
40: #155fa9,
50: #3a78c4,
60: #5792e0,
70: #74adfd,
80: #a5c8ff,
90: #d4e3ff,
95: #ebf1ff,
98: #f9f9ff,
99: #fdfcff,
100: #ffffff,
),
secondary: (
0: #000000,
10: #001c3a,
20: #00315e,
25: #003c72,
30: #004785,
35: #00539a,
40: #155fa9,
50: #3a78c4,
60: #5792e0,
70: #74adfd,
80: #a5c8ff,
90: #d4e3ff,
95: #ebf1ff,
98: #f9f9ff,
99: #fdfcff,
100: #ffffff,
),
tertiary: (
0: #000000,
10: #001c3a,
20: #00315e,
25: #003c72,
30: #004785,
35: #00539a,
40: #155fa9,
50: #3a78c4,
60: #5792e0,
70: #74adfd,
80: #a5c8ff,
90: #d4e3ff,
95: #ebf1ff,
98: #f9f9ff,
99: #fdfcff,
100: #ffffff,
),
neutral: (
0: #000000,
4: #000821,
6: #000c32,
10: #001453,
12: #03185a,
17: #0b226d,
20: #0f2878,
22: #152d7d,
24: #1b3282,
25: #1e3484,
30: #2b4090,
35: #384d9c,
40: #4559a9,
50: #5e72c4,
60: #788ce0,
70: #93a7fd,
80: #b8c4ff,
87: #d2d8ff,
90: #dde1ff,
92: #e4e7ff,
94: #ebecff,
95: #efefff,
96: #f3f2ff,
98: #fbf8ff,
99: #fefbff,
100: #ffffff,
),
neutral-variant: (
0: #000000,
10: #181c22,
20: #2d3138,
25: #383b43,
30: #43474e,
35: #4f525a,
40: #5b5e66,
50: #74777f,
60: #8d9199,
70: #a8abb4,
80: #c3c6cf,
90: #e0e2ec,
95: #eef0fa,
98: #f9f9ff,
99: #fdfcff,
100: #ffffff,
),
error: (
0: #000000,
10: #410002,
20: #690005,
25: #7e0007,
30: #93000a,
35: #a80710,
40: #ba1a1a,
50: #de3730,
60: #ff5449,
70: #ff897d,
80: #ffb4ab,
90: #ffdad6,
95: #ffedea,
98: #fff8f7,
99: #fffbff,
100: #ffffff,
),
);

$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$_error: map.merge(map.get($_palettes, error), $_rest);

$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
use-system-variables: true,
),
typography: (
use-system-variables: true,
),
));

// Aggiungi questa esportazione per rendere disponibili le palette
$color-config: (
primary: $_primary,
secondary: map.get($_palettes, secondary),
tertiary: $_tertiary,
error: map.get($_palettes, error)
);

@function get-theme-color($theme, $key) {
@return map.get(map.get($theme, color), $key);
}

// Esporta le variabili dei colori
$primary-color: map.get($_primary, 40);
$primary-lighter: map.get($_primary, 90);
$primary-darker: map.get($_primary, 20);
$error-color: map.get($_error, 40);



ng version

"@angular-devkit/core": "^18.2.14",
"@angular-eslint/utils": "^18.4.3",
"@angular-material-components/file-input": "^16.0.1",
"@angular/animations": "^18.2.13",
"@angular/cdk": "^18.2.14",
"@angular/common": "^18.2.13",
"@angular/compiler": "^18.2.13",
"@angular/compiler-cli": "^18.2.13",
"@angular/core": "^18.2.13",
"@angular/forms": "^18.2.13",
"@angular/localize": "^18.2.13",
"@angular/material": "^18.2.14",
"@angular/material-moment-adapter": "^18.2.14",
"@angular/platform-browser": "^18.2.13",
"@angular/platform-browser-dynamic": "^18.2.13",
"@angular/platform-server": "^18.2.13",
"@angular/router": "^18.2",


What I have tried so far:

• Verified that all necessary Angular Material modules are imported.
• Ensured that a Material M3 theme is correctly defined and included in my global styles.
• Inspected the elements in the browser's developer tools for any obvious CSS errors or missing styles.
• Cleared the browser cache and restarted the development server.

This is how I would expect the component:



I'm not sure what's causing this rendering issue. Any help or suggestions on how to diagnose and fix this would be greatly appreciated.

Continue reading...