material design styles working on one module but not another - css

Question

I've got a strange one and unfortunately I don't have code to share because I'm not sure it would add value to this post.
I have two components (User and Project). They both import Shared which is doing all of my material design imports and re-exporting them. On one of my modules when I apply the class mat-raised-button to an element, it works perfectly, on the other, it's only pulling in some of the CSS and injecting it into a <style> tag on the page but it's missing a bunch of other styles that are being injected to the working component on the working module. This has nothing to do with my style scopes because I can spin up a brand new component in both modules and it works great on one, not at all on the other (w/o doing anything other than adding the button with that class).
What's weird is that it IS pulling in some of the mat-raised-button styles, just not all of them. Is there some sort of mechanism that can prevent certain styles from being injected? I'm happy to post whatever code might help and I apologize that this is such a broad question, but unfortunately I don't have much to go on here...
UPDATE: I did some more digging and see that it's the mat-button class that's not working. I tried importing MatButtonModule directly into my failing module and seeing the same behavior...still not working correctly.
UPDATE 2: the buttons aren't working in my root app.component either. They're only working on one of my modules. This is really weird. Here's the code for the working module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { UserRegistrationComponent } from '../Components/user-registration.component';
import { CreateAccountDialogComponent } from '../Components/create-account-dialog.component';
import { FormsModule } from '#angular/forms';
import { ValidationErrorsComponent } from '../../user/Components/sharedcomponents/validation-errors.component';
import { UserLoginComponent } from '../Components/user-login.component';
#NgModule({
declarations: [
UserRegistrationComponent,
CreateAccountDialogComponent,
ValidationErrorsComponent,
UserLoginComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule
],
entryComponents: [
CreateAccountDialogComponent
]
})
export class UserModule { }
and here's the code for the module that's not working:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SharedModule } from '../../Shared/Module/shared.module';
import { ProjectFileUploadComponent } from '../Components/project-file-upload.component';
import { ProjectComponent } from '../Components/project.component';
import { FormsModule } from '#angular/forms';
import { MatButtonModule } from '#angular/material';
#NgModule({
declarations: [
ProjectFileUploadComponent,
ProjectComponent
],
imports: [
CommonModule,
SharedModule,
FormsModule,
MatButtonModule
]
})
export class ProjectModule { }

Answer 1

From what you're describing, I would think that you had local styles cancelling out global styles. The way to determine that is to comment out the styles in your local component, and see if your material design styles turn back up.
If that is the case, all you need to do is add and ViewEncapsulation.None statement to your #Component statement, to stop it cancelling out external styles:
#Component({
selector: 'speed-dial-fab',
templateUrl: './speed-dial-fab.component.html',
styleUrls: ['./speed-dial-fab.component.css'],
animations: speedDialFabAnimations,
encapsulation: ViewEncapsulation.None
})
So not a bugged module. Not voodoo either!