角材料形状字段行为不正确

Question

我一直遵循boilerplate template在SharePoint Framework Webpart中使用Angular Element组件。使用此模板并添加以下package.json：

"dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/cdk": "^5.0.0-rc.2",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "^5.2.11",
    "@angular/core": "5.2.11",
    "@angular/elements": "angular/elements-builds#labs/elements",
    "@angular/forms": "5.2.11",
    "@angular/material": "^5.0.0-rc.2",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@angular/platform-server": "5.2.11",
    "@microsoft/sp-core-library": "~1.3.4",
    "@microsoft/sp-lodash-subset": "~1.3.4",
    "@microsoft/sp-office-ui-fabric-core": "~1.3.4",
    "@microsoft/sp-webpart-base": "~1.3.4",
    "@ngtools/webpack": "^1.8.0",
    "@pnp/spfx-property-controls": "^1.0.0",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "chance": "^1.0.12",
    "lodash": "^4.17.4",
    "rxjs": "^5.5.2",
    "sp-pnp-js": "^3.0.2",
    "zone.js": "0.8.26"
  }

表单字段的行为正常（占位符弹起，标签和下划线更改颜色等）。 当我将项目更新为Angular 6时，进行了更改以使用新的语法注册自定义组件，我得到了一个有效的表单，但是具有以下行为：

package.json升级后：

"dependencies": {
    "@angular/animations": "6.1.3",
    "@angular/cdk": "^6.4.6",
    "@angular/common": "6.1.3",
    "@angular/compiler": "6.1.3",
    "@angular/compiler-cli": "^6.1.3",
    "@angular/core": "6.1.3",
    "@angular/elements": "6.1.3",
    "@angular/forms": "6.1.3",
    "@angular/material": "^6.4.6",
    "@angular/platform-browser": "6.1.3",
    "@angular/platform-browser-dynamic": "6.1.3",
    "@angular/platform-server": "6.1.3",
    "@microsoft/sp-core-library": "~1.3.4",
    "@microsoft/sp-lodash-subset": "~1.3.4",
    "@microsoft/sp-office-ui-fabric-core": "~1.3.4",
    "@microsoft/sp-webpart-base": "~1.3.4",
    "@ngtools/webpack": "^1.8.0",
    "@pnp/spfx-property-controls": "^1.0.0",
    "@types/webpack-env": ">=1.12.1 <1.14.0",
    "chance": "^1.0.12",
    "lodash": "^4.17.4",
    "rxjs": "^6.2.2",
    "sp-pnp-js": "^3.0.2",
    "zone.js": "0.8.26"
  }

我能检测到的唯一两者之间的区别是输入字段上的事件侦听器。工作字段具有来自zone.js的事件侦听器：

输入中的非工作字段事件侦听器来自平台浏览器：

有没有人可能对如何正确配置Angular Material所需的配置提出建议？

Answer 1

在您的styles.scss

中添加主题

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';