组件的css无法识别

Question

我有几个组件的路由正在运行，但是这个组件忽略了每个组件的css，例如，我现在使用角度材料，组件中的卡片，这个组件我个性化了一点而angular2-4忽略了我或不认识我的个性化

component.html

<div class="demo-card-container">
  <mat-card *ngFor="let property of rowData[currentResource];">
    <img mat-card-md-image [src]="property.Media && property.Media.length > 0 ? property.Media: 'assets/images/grey.jpg'" class="mat-card-img">
    <span class="timeapp-card">
      {{property.DaysOnMarket}} days ago
    </span>
    <mat-card-content>
      <div class="mat-card-title-header-custom">
        <mat-card-title mat-card-title>$ {{property.ListPrice}}
        </mat-card-title>
        <mat-card-subtitle mat-card-subtitle>
          {{property.City}}
          <div class="div-list-item">
            <mat-icon class="mat-icon-list">hotel</mat-icon>
            {{property.BedroomsTotal}} Bedrooms
          </div>
          <ng-template *ngIf="property.LotSizeSquareFeet !== null">
            <div class="div-list-item">
              <mat-icon class="mat-icon-list">local_laundry_service</mat-icon>
              {{property.LotSizeSquareFeet}} sqft
            </div>
          </ng-template>
          <ng-template *ngIf="property.BathroomsTotalInteger !== null">
            <div class="div-list-item">
              <mat-icon class="mat-icon-list">local_laundry_service</mat-icon>
              {{property.BathroomsTotalInteger}} Bathrooms
            </div>
          </ng-template>
          <ng-template *ngIf="property.ParkingTotal !== null">
            <div class="div-list-item">{{property.ParkingTotal}} Parking</div>
          </ng-template>
        </mat-card-subtitle>
        <mat-card-content>
          <p>{{property.UnparsedAddress}}</p>
        </mat-card-content>
        <!-- <div style="height: 44px;"></div> -->
      </div>
    </mat-card-content>
  </mat-card>
</div>

这是我在组件中的css component.css

.mat-card {
  margin: 0 auto;
  /*width: 350px;*/
  padding-top: 0;
  padding-bottom: 15px;
  margin-bottom: 16px;
}

.demo-card-container {
  display: flex;
  flex-wrap: wrap;
}

img {
  background-color: gray;
}

.demo-card-blue {
  background-color: #b0becc;
}

.mat-card-actions {
  display: flex;
  flex-direction: column;
}

span.favorite-icon {
  float: right;
}

.mat-card-title span {
  color: rgba(0, 0, 0, .54);
  font-size: 14px;
}

.mat-icon-list {
  font-size: 15px;
  height: 15px;
  width: 15px;
}

.mat-card-subtitle .div-list-item {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 5px;
  color: #9e9e9e;
  border-radius: 4px;
  margin-right: 5px;
  margin-top: 5px;
}

.mat-card-img{
  width: calc(100% + 48px);
  margin: 0 -24px 16px -24px;
  height: auto;
}

.button-list {
  position: absolute;
  bottom: 15px;
  right: 0px;
}

.mat-card-content {
  margin-bottom: 46px;
}

@media (min-width: 992px) {

}
@media (max-width: 600px) {
  .mat-card {
    padding-top: 0;
  }
  .mat-card-img{
    width: calc(100% + 32px);
    margin: 0 -16px 16px -16px;
  }
}

@media (max-width: 992px) {

}

@media (min-width: 1561px) {
  .mat-card {
    width: 250px;
  }
}

@media (min-width: 1367px) and (max-width: 1560px) {
  .mat-card {
    width: 285px;
  }
}

@media (min-width: 812px) and (max-width: 1366px){
  .mat-card {
    width: 255px;
  }
}


@media (max-width: 1244px) {
  .mat-card {
    width: 330px
  }
}

@media (max-width: 1166px){
    .mat-card {
      width: 290px;
    }
}
@media (min-width: 1244px){
  .mat-card-image:first-child {
    height: 200px;
  }
}

@media (max-width: 1046px){
  .mat-card {
    width: 430px;
  }
}

@media (max-width: 992px) {
  .mat-card {
    width: 900px;
  }
}


.splitSize-grid {
  width: 100%;
}