Angular Materials Won't Apply Styles to Components

Angular Material: Components not styled correctly

You're way to import the css file is correct,

edit

Response

But as found here and also answered here

Finally, if your app's content is not placed inside of a mat-sidenav-container element, you need to add the mat-app-background class to your wrapper element (for example the body). This ensures that the proper theme background is applied to your page.

You have to add the body tag with the mat-app=background class to your index.html or to a wrapper element around the app to make it work see here for the example.

Note that if you add it to the app node itself, you'll also need a display: block

Usefull

Angular have 3 different ways to add material theme to your app

Inside angular.json file

"styles": [
  "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
  "src/styles.scss"
],

inside the style.css file

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

Inside the index.html file

<link href="node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" rel="stylesheet">

Angular Materials won't apply styles to components

Your code should work as expected. See the below code,

<div class="profilebuttoncontainer">
     <button md-button class="temp-class">Click me!</button>
</div>

Note : Add the stylesheet reference at the component level using below line

styleUrls:[`....`]

LIVE DEMO

Angular 7 - Material component CSS not loading

Here is an example of how i have declared one in the past hopefully it will help:

<form (submit)="onSaveProject(projectForm, projectForm.value)" #projectForm="ngForm" *ngIf="!isloading">
 <mat-form-field>
  <input matInput type="text" name="projectDescirption" 
  [ngModel]="project?.projectDescirption"
  required
  minlength="5"
  placeholder="Project Description"
  #projectDescirption="ngModel">
  <mat-error *ngIf="projectDescirption.invalid">Please descibe the project (minimum 5 characters)</mat-error>
 </mat-form-field>
</form>

Also ensure you have the module imported, again here is an example of how i have done it in the past:

app.moudle.ts

import { 
 MatInputModule,
 MatCardModule,
 MatButtonModule,
 MatFormFieldModule,
 MatToolbarModule,
 MatExpansionModule,
 MatProgressSpinnerModule,
 MatPaginatorModule,
 MatDialogModule,
 MatOptionModule,
 MatSelectModule,
 MatDividerModule,
 MatCheckboxModule,
 MatSlideToggleModule,
 MatProgressBarModule,
 MatDatepickerModule,
 MatNativeDateModule
} from '@angular/material';

@NgModule({
 imports: [
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatFormFieldModule,
  MatToolbarModule,
  MatExpansionModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatDialogModule,
  MatOptionModule,
  MatSelectModule,
  MatDividerModule,
  MatCheckboxModule,
  MatSlideToggleModule
]
})

Angular material overwrite style.css

I would suggest to create a separate .scss file reserved for styling globaly Angular Material elements, and importing it in the main styles.scss file.
Answering your question - propably you're not 'specific' enough. First of all it would be nice to add an additional custom class to your Material element so the custom styles will be applied only when this class is present. Example on styling

.mat-table.my-custom-class {
   width: 100%;

   .mat-cell {
     font-size: 20px;
     padding: 20px;
   }
}

You might nest the elements event more for higher css specificity

Style.css of Angular not applying to certain Component

Try to remove styles from the your.component.css which overlapps in styles declared in styles.css and all global styles should be applied.
Or you override your styles in styles.css by declaring new classes which are placed lower than your desired styles.

Some your global styles are not applied because of CSS specifity rule.
Read a great article at mdn about CSS speicifity.

Try to avoid using !important keyword by using CSS specifity rules. It's almost never a good idea to use !important.

UPDATE:

Chrome Developer tools shows that CSS properties 'trans-msg-his-dialog' are overridden. It can be seen by struck-through lines at CSS properties.

You can see which properties won by clicking Computed style tab:

Or try to move these styles to the bottom of style.css file:

.content-body a {
    cursor: pointer;
    text-decoration: none;
    color:  #4c90c7
}

.content-body a:hover {
    color: #346092;
}

.content-body a:visited {
    text-decoration: none;
    color: #4c90c7
}

UPDATE 1:

Now we know that Bootstrap style has too strong selectors and overrides your anchor:

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

We see that if <a> tag does not have href or tabindex attributes, then it will have color: inherit and text-decoration: none;. So try to add href attribute to your anchor tag:

<a href="javascript:;">Button</a>

Can we change styling of angular-material components?

if you would like to customise your Angular material components and provide your own stylings, I have the following suggestions. You may use one of them.

1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration

.mat-form-field-label {
  color:blue!important;
}

2) Use ViewEncapsulation:None on that specific component. This removes all encapsulation, such that CSS rules will have a global effect. With that, you can customise the CSS properties by editing the classes on the component.css.

3) Usage of /deep/.(However, it is deprecated/soon to be deprecated, thus I won't recommend you to use it on the long term)

On your component.ts,

:host /deep/ .mat-form-field {
  text-align: left !important;
}

4) Supplying the directives with a custom class

<mat-placeholder class="placeholder">Search</mat-placeholder>

And on your css,

.placeholder {
  color: green
}