Angular 4中的导入材质设计布局网格

Question

我想在我的角度4项目中添加this网格。我已经使用

安装了这些网格

npm install @material/layout-grid

这个命令，但现在我无法导入我的angular 4项目。我的代码是这样的

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell">One</div>
    <div class="mdc-layout-grid__cell">Two</div>
    <div class="mdc-layout-grid__cell">Three</div>
  </div>
</div>

但是我的div没有正确对齐。请参见下图。

我得到的结果是这样的。如何使用此布局网格水平对齐div？请帮忙。

Answer 1

可能你没有为你的角项目导入css和js文件。查看.angular-cli.json文件，应该有类似的内容：

"styles": [
        "../node_modules/path-to-your-module-css", // add this line 
        "styles.css"
      ],

或者您也可以将其直接导入组件css：

@import "../node_modules/path-to-your-module-css";