如何将 Angular Material 字段设置为 width:100%？

Question

如何在屏幕尺寸小于 840 像素的情况下将表单字段设置为最大宽度？

我正在使用：Angular、Angular 材料和 Flex-Layout。

具体来说，为什么这不起作用？我应该改用什么？

Styles.css:

@media (max-width: 840px) {
  md-form-field{
    width: 100%;
  }
}

Answer 1

可能您在错误的 css 文件中设置了规则，例如 styles.css。如果需要在那里设置样式，请关闭 ViewEncapsulation:

import { ViewEncapsulation } from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None,
})

How to set Angular Material Fields to width:100%?