I still having the issue with mdb components and styles.

After looking at the node_modules folder, it appears that the mdb component template is being applied but it is not replacing the selector for the component.

Example: mdb-accordion

• 1) The component selector is 'mdb-accordion-item-head'
• 2) The component template is '<div class=\"card-header {{ customClass }}\" [ngClass]=\"{ 'item-disabled': isDisabled }\" (click)=\"toggleClick($event)\">\n'
• 3) The generated html is '<mdb-accordion-item-head _ngcontent-c3="" customclass="faq-header" ng-reflect-custom-class="faq-header"><div class="card-header faq-header" ng-reflect-klass="card-header faq-header" ng-reflect-ng-class="[object Object]">'

As you can see the selector is not replaced with the template, it is appended to the selector and "faq-header" class is applied to both elements. This makes it difficult to apply component specific scss rules correctly.

I hope this clears up my question