css - Angular Material 按钮未呈现

标签 css angular angular-material

我已经按照步骤安装 Material 设计,但是当我添加按钮时,我没有得到 MD 样式。

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
</mat-menu>

Package.json 文件

{
  "name": "apimap",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.2",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

我还在index.html中添加了css主题+material design 在 app.mudule.ts 中添加了 MD 模块,但我得到了基本的 html 按钮样式,只有 mat-menu-item 是 MD 样式。

更新:按钮的屏幕截图: button not rendering

当我点击它时

menu item rendering

最佳答案

只是为了确认一下,您是否在 appModule 导入中添加了 MatButtonModule?由于我的声誉,无法将其添加为评论:P

关于css - Angular Material 按钮未呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47356166/

相关文章:

html - 隐藏 CSS 溢出

html - 如何在调整窗口大小时调整 Bootstrap 中的行?

css - 关于绝对定位或固定定位元素的边距或显示属性的相关性问题

css - typescript 评级组件未正确显示

html - 在 asp.net mvc 中添加或激活代码 html

javascript - 使用 Angular 2 需要两个字段中的一个

angular - 将 angular2 组件名称/"this"转换为字符串

angular - 如何在 Angular Material 表中对单个表使用 2 分页?

angular - mat-table - 如果任何列的内容很长,则溢出父级 div

angular - 如何在 Angular 单击时突出显示 div