CODEWITHSUNDEEP
cssangular-materialangular18
김도균
김도균

Reputation: 49

After updating to Angular 18 and Material, the method for applying CSS has changed

I created a custom component by extending MatCheckbox.

Before the update, I was able to apply the default CSS using:

scss

@use '@material/checkbox/mdc-checkbox';

However, after upgrading Angular and Material to version 18, @use '@material/checkbox/mdc-checkbox'; no longer exists. What is the recommended alternative to achieve the same functionality?

Upvotes: 2

Views: 248

Answers (1)

Naren Murali
Naren Murali

Reputation: 57521

The new theming works differently compared to before, please go through the docs - Angular Material Theming

In Angular 18 you can import themes to the component in two ways.

Import all the invidual component themes at once using:

@include mat.all-component-themes($theme);

Or one by one using:

@include mat.checkbox-theme(theme.$theme);

To know the full list of component themes - _all-theme.scss

So you first need to define the base theme in global styles.scss file.

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;

  // @include mat.all-component-themes($theme);
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);

After this in your component, you can import this theme and style it using the base theme.

@use '@angular/material' as mat;
@use '../styles' as theme;

:host {
  @include mat.checkbox-theme(theme.$theme);
}

Stackblitz Demo

Upvotes: 0

Related Questions