如何使用 Angular Material 为 layout-margin flex 变体定义样式

Question

我想为 flex 和 flex-sm 标签设置不同的边距：

    <div layout="row" layout-margin layout-wrap>
      <div flex="30" flex-sm="100" ng-repeat="occasion in
          resultObject.occasionTypes[typeIndex].occasions">
            ------------
      </div>
    </div>

我尝试使用类似的东西：

[layout-margin] > [flex] {
    margin: 3px; }

[layout-margin] > [flex-sm] {
    margin: 0px; }

但是没用。有什么办法吗？

Answer 1

Angular material 不会根据浏览器大小添加或删除属性，因此 [flex] 和 [flex-sm] 将始终在您的元素上。这就是它们都适用的原因，如果你想完成这个，你将不得不编写一个与 angular material 具有相同断点的媒体查询：

[layout-margin] > [flex] {
    margin: 3px; 
}

@media (max-width: 599px){
    [layout-margin] > [flex-sm] {
        margin: 0; 
    }
}

如何使用 Angular Material 为 layout-margin flex 变体定义样式

How to define style to layout-margin flex variants, using Angular Material

css

angularjs

angular-material