如何提取审查元素的CSS样式并应用以修改ngx-editor编辑器高度

以下是按优先级从高到低排列的可行方案：

方案1：使用ngx-wig自带的height输入属性（最推荐） #

ngx-wig本身支持通过输入参数直接设置编辑器高度，无需自定义CSS，写法如下：

<ngx-wig [(ngModel)]="post.description.features" [height]="121"></ngx-wig>

你之前直接在标签上加行内style不生效，是因为行内样式仅作用于ngx-wig宿主标签，无法作用到内部的.nw-editor编辑区域。

方案2：组件内样式穿透 #

如果需要在当前组件内自定义样式，需要用::ng-deep穿透Angular的样式隔离，搭配:host避免污染全局样式：

:host ::ng-deep .nw-editor {
  height: 100px !important;
  min-height: 100px !important; /* 需同时覆盖默认min-height，避免高度被撑开 */
}

方案3：全局样式修改 #

如果需要全局统一调整所有ngx-wig编辑器的高度，直接在全局style.scss中添加以下代码即可：

.nw-editor {
  height: 100px !important;
  min-height: 100px !important;
}

之前全局样式不生效是因为第三方组件默认样式优先级更高，添加!important可提升自定义样式的优先级。

方案4：指定自定义类名隔离修改 #

如果只需要修改特定编辑器的高度，可给对应ngx-wig标签添加自定义类名，再针对性修改：

<ngx-wig class="custom-editor" [(ngModel)]="post.description.features"></ngx-wig>

/* 全局style.scss中添加 */
.custom-editor .nw-editor {
  height: 100px !important;
  min-height: 100px !important;
}

内容的提问来源于stack exchange，提问作者user9436741