如何用::ng-deep覆盖@kolkov Angular Editor的text-area样式？

由于Angular的组件样式隔离机制，父组件无法直接修改子组件（如这里的angular-editor）内部的CSS类样式，此时可以通过::ng-deep穿透样式隔离，访问并修改编辑器内部的.text-area类。

修改步骤 #

在调用编辑器的页面CSS中，添加::ng-deep规则定位.text-area类，建议配合:host使用，避免样式污染全局：

:host {
  .#{$css-namespace}block {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin: 0 0 0 6.8em;
  }

  .#{$css-namespace}flex{
    margin-left: 23em;
    width: 70em;
  }
  .#{$css-namespace}inline{
    margin: 0.5rem 0;
  }

  .#{$css-namespace}classic{
    background-color: #21619d;
    font-weight: bold;
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f;
    border: #21619d;
    color: #fff;
    height: 3em;
    width: 7em;
    align-self: end;
    margin-top: 2em;
    cursor:pointer;
  }

  /* 新增：修改编辑器text-area样式 */
  ::ng-deep .text-area {
    /* 示例样式，根据实际需求调整 */
    min-height: 250px;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 14px;
  }
}

关键说明 #

• ::ng-deep会打破Angular的样式隔离，让父组件样式渗透到子组件内部
• 配合:host使用时，样式仅作用于当前组件及其子组件范围，不会影响全局其他组件
• 可根据审查元素获取的具体属性，替换示例中的CSS规则，比如调整宽度、字体、边框样式等

相关代码参考 #

编辑器组件代码

<angular-editor [placeholder]="placeholder"
                [formControl]="html"
                [config]="config">
</angular-editor>

调用编辑器的页面HTML

<div class="vsk__card vsk__flex">
  <div class="vsk__column">
    <div class="vsk__inline">
      <label>Auteur</label>
      <input [formControl]="author" type="text">
    </div>
    <div class="vsk__inline">
      <label>Titre</label>
      <input [formControl]="title" type="text">
    </div>
    <div class="vsk__inline">
      <label>Date</label>
      <input [formControl]="datePost" type="text">
    </div>
    <div class="vsk__inline">
      <label>Contenu</label>
      <dash-html-editor></dash-html-editor>
    </div>
    <button (click)="onSubmit()" class="vsk__classic">Click to submit</button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者l3miage-crivoid