html - Angular - 如何在 ng-content 中设置类的样式？

Question

我有这个文件上传组件 <ng-content> 。组件内的所有标签都继承background-color: rgba(121, 211, 255, 0.15);来自.fileover当用户将文件从操作系统悬停到文件上传区域时。但我无法更改 .ag-center-cols-viewport 的背景颜色<ng-content>里面。我尝试过使用 ::slotted和::ng-deep 。最后的图片显示background-color: red;如果我改变 chrome devtols 内的颜色就可以了。

::ng-deep doc

::slotted doc

有什么建议为什么这不起作用吗？

HTML:

 <div>
            <div class="containerDragDrop" appDnd (fileDropped)="onFileDropped($event)">
              <input class="inputDragDrop file-input" type="file" #fileupload accept="{{accept}}"
                     [disabled]="disabled" multiple
                     (change)="addFiles($event)"/>
                     <ng-content class="fileDropRef"></ng-content>
              <div class="middleFileText">
      </div>
      <label *ngIf="choseFileToggle" class="labelDragDrop" (click)="fileupload.click()">Välj Filer</label>
            </div>
          </div>

带有::slotted 的 CSS:

.fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  :host ::slotted(.ag-center-cols-viewport) {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}

CSS 与::ng-deep:

.fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  :host ::ng-deep .ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}

Answer 1

我缺少一些关于您的 html 代码所在位置以及 ag-center-cols-viewport 是什么的信息，但我认为您确实将其添加到组件中。让我们说 my.component.html 并将 ag-center col 导入到您的 @NgModule

注意: ::ng-deep 是 deprecated并将在未来版本的 Angular 中删除，请不要再使用

在 my.component.ts 中添加以下内容

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None, // <-- Here, we remove the style encapsulation
})

然后用你的my.component.scss然后这样写

 my-component { // Name of your selector
  .fileover {
  .middleFileText{
    opacity: 0.8;
  }
  background-color: rgba(121, 211, 255, 0.15);
  .ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
  }
}
}

如果这不起作用，可能是因为您使用的组件确实在更高级别上加载代码，这意味着代码不在组件内，而是在组件外部，添加到 DOM 中的某个位置。

为了能够使用 css 更改此设置，您必须将全局 css 添加到位于 src 文件夹根部的 style.css 中

.ag-center-cols-viewport {
    background-color: rgba(121, 211, 255, 0.15) !important;
}

如果你不希望CSS全局改变，那么你应该找到一种方法来添加一些自定义的CSS类名到ag-center-cols-viewport