样式材质网格列表项

Question

所以这个：

   <md-grid-list cols="5" rowHeight="20px">
      <md-grid-tile
          *ngFor="let carBrand of carBrands"
          colspan= 1
          rowspan= 1>
        <md-checkbox>{{ carBrand}}</md-checkbox>
      </md-grid-tile>
    </md-grid-list>

生成我的列表，但cols中的所有项目都居中。我在开发工具中看到，如果我将justify-content: center更改为justify-content: left，它可能效果很好，但在我的代码中无法达到相同的效果。

如何正确设计这些风格？

Answer 1

在您的组件上将View Encapsulation设置为无：

@Component({
    templateUrl: './my.component.html' ,
    styleUrls: ['./my.component.css'], 
    encapsulation: ViewEncapsulation.None,
})

然后在您的组件css中，您可以完全按照您在开发工具中尝试的操作，将样式覆盖到justify-content: left

  

View Encapsulation = None表示Angular没有视图   封装。 Angular将CSS添加到全局样式中。范围界定   前面讨论的规则，隔离和保护不适用。这个   与将组件的样式粘贴到其中的基本相同   HTML。