css - :host selector for angular-material dialog

Question

我正在使用 dialog来自 angular-material 的组件，我想在其中设置弹出对话框的样式。

我知道通过生成组件有一些内置的样式支持:

let dialogRef = dialog.open(MyDialogComponent, {
  height: '400px',
  width: '600px',
  panelClass: 'some-class'
});

但这会导致样式定义在对话框组件样式和生成定义中分离。我想做的是为所有这种类型的对话框调整对话框样式本身。一个合乎逻辑的步骤是在组件 css 上使用 :host:

:host {
    width: 600px;
    padding: 0px;
}

Plunker来说明我的观点。

这有可能吗？

Answer 1

Plunker example

我添加了display: block

:host { /* This is not working as expected */
  width: 800px;
  padding: 0px;
  display: block;
}

并在 PlunkerAppModule 中更改了这部分

  declarations: [DialogOverviewExample, DialogOverviewExampleDialog],
  bootstrap: [DialogOverviewExample],
  entryComponents: [DialogOverviewExampleDialog],
  providers: []
})