1

According to Angular Material Documentation it's required to include entire theme for the framework to work correctly. Obviously, entire theme contains styles for all components.

However, I'm building component library and pulling only specific component from Angular Material. Based on that, I need an ability to include only styles for the individual component.

Is there way to include styles for a particular component ?

I understand there might be a solution to go and grab styling from the source, but it would be preferable to have more "organic" approach which encapsulates the implementation and will reflect changes in my component when Angular Material will be updated.

skryvets
  • 2,808
  • 29
  • 31

1 Answers1

0

Try do like this

in theme.scss you wrote

// Define the theme.
$component1-primary: mat-palette($mat-indigo);
$component1-accent:  mat-palette($mat-pink, A200, A100, A400);
$component1-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Include the theme styles for only specified components.
.component1-light-theme{
   @include angular-material-theme($component1-theme);
}

add a whole parent element to your component and add component1-light-theme to that element, like

in component1 html

<div class="component1-light-theme">
  //all other elements
</div>
Akhi Akl
  • 3,795
  • 1
  • 15
  • 26
  • Thanks for your reply, but in order to use `mat-palette`, `mat-light-theme` and `angular-material-theme` it's required to `@import '~@angular/material/theming';` which contains mentioned mixins. That doesn't answer my question. – skryvets Nov 07 '18 at 20:03