Angular 如何使用Priming textarea获得CSS焦点？

我无法让这个CSS在我的Priming textarea中运行

这是我的CSS。无效函数有效，但悬停函数无效

.is-invalid {
  .ql-toolbar.ql-snow {
    border: 1px solid $red !important;
    border-radius: 0;

  }

  .ql-toolbar.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }

  .ql-container.ql-snow {
    border: 1px solid $red !important;
    border-top: 0px !important;

  }

  .ql-container.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }
}

这是我的html，加入priming元素：

<p-editor [ngClass]="{'editor': true,
                      'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                      'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
          [(ngModel)]="foretagsprofil.omoss"
          formControlName="omoss"
          placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
          [style]="{'height':'350px', 'width':'100%'}"
          [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
  <p-header tabindex="0">
    <span ngClass="ql-formats">
      <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
      <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
    </span>
  </p-header>
</p-editor>

---

由于p-editor基于quill js库，因此您可以通过编辑器组件访问quill库，以便像这样调用focus函数

在html中

 <p-editor #textEditor [ngClass]="{'editor': true,
                              'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                              'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
                  [(ngModel)]="foretagsprofil.omoss"
                  formControlName="omoss"
                  placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
                  [style]="{'height':'350px', 'width':'100%'}"
                  [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
          <p-header tabindex="0">
            <span ngClass="ql-formats">
              <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
              <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
            </span>
          </p-header>
        </p-editor>

---

好的，谢谢你的意见。那么我把CSS放在哪里呢？可以在ts文件中添加css吗？

 import { ViewChild } from '@angular/core';
    @ViewChild('textEditor') textEditor: Editor;
     quill: any;
    ngOnInit(){
       this.quill = this.textEditor.getQuill();
       this.quill.focus();
    }