时间戳

首页 > 解决方案 > Angular CSS 未应用于“mat-grid-list”

html - Angular CSS 未应用于“mat-grid-list”

问题描述

我有一个Angular 6应用程序，我有一个页面，mat-card其中包含mat-grid-list3 列。

在mat-grid-listI have 3 emptyspan中显示一个空的彩色方块，最后有一个标签。

我已经创建了我的CSS并在我的文件中引用了它，HTML但它似乎只适用于我的第一个span和我的第一个CSS

CSS

.complaintSquare {
    background-color: #ffb2b2;
};

.enquirySquare {
    background-color: red;
};

.otherSquare {
    background-color: green;
};

HTML

<mat-card>
  <mat-card-title class="thirdCard">Notes</mat-card-title>
  <mat-card-content>
    <mat-grid-list cols="3">
      <span>
        <span class="complaintSquare"> &nbsp;  &nbsp; </span>
          &nbsp;Complaint
      </span>
      <span>
        <span class="enquirySquare"> &nbsp;  &nbsp; </span>
        &nbsp;Enquiry
      </span>
      <span>            
        <span class="otherSquare"> &nbsp;  &nbsp; </span>
        &nbsp;Other
      </span>
    </mat-grid-list>

标签： htmlcssangular

解决方案

问题是你所有的css类最后都有一个分号（;） -

你的 CSS 应该是这样的——

.complaintSquare {
    background-color: #ffb2b2;
}

.enquirySquare {
    background-color: red;
}

.otherSquare {
    background-color: green;
}
<mat-card>
  <mat-card-title class="thirdCard">Notes</mat-card-title>
  <mat-card-content>
    <mat-grid-list cols="3">
      <span>
        <span class="complaintSquare"> &nbsp;  &nbsp; </span>
          &nbsp;Complaint
      </span>
      <span>
        <span class="enquirySquare"> &nbsp;  &nbsp; </span>
        &nbsp;Enquiry
      </span>
      <span>            
        <span class="otherSquare"> &nbsp;  &nbsp; </span>
        &nbsp;Other
      </span>
    </mat-grid-list>

推荐阅读