带有降价文件的角度：影响其他组件样式的组件样式答案

【问题标题】：Angular with markdown files : style of component affecting other component's style带有降价文件的角度：影响其他组件样式的组件样式
【发布时间】：2020-10-17 05:39:58
【问题描述】：

ComponentA的HTML模板

<app-tooltip [chemin]="'../../assets/markdowns/typeDisk.md'"></app-tooltip>
<table>
.
.
.
</table>

工具提示组件：

import { Component, Input, Inject } from '@angular/core';
import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-tooltip',
  template: `<i (click)="openMarkDown()" class="fas fa-info-circle fa-lg"></i>`,
  styleUrls: ['./tooltip.component.css']
})
export class TooltipComponent {

  @Input() chemin: string;

  constructor(public dialog: MatDialog) { }

  openMarkDown(): void {
    const dialogRef = this.dialog.open(MarkDownOverview, {
      data: this.chemin,
      panelClass: 'my-parent-class'
    });
  }
}

@Component({
  selector: 'dialog-overview-example-dialog',
  template: `
    <i class="fas fa-times fa-lg" (click)="onNoClick()"></i>
    <div class="my-parent-class" markdown [src]="data"></div>
  `,
  styleUrls: ['./tooltip.component.css']
})
export class MarkDownOverview {

  constructor(public dialogRef: MatDialogRef<MarkDownOverview>, @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

所以基本上它的作用是当点击<i> 时，它会打开一个包含降价文件内容的材质对话框。在这个 markdow 文件内容中，我做了一个这样的表格：

| COLUMN | COLUMN | COLUMN |
| :----: | :----: | :----: |
|  ....  |  ....  |  ....  |
|  ....  |  ....  |  ....  |
|  ....  |  ....  |  ....  |
|  ....  |  ....  |  ....  |

Markdown 表格默认没有样式，所以我在 Markdown 文件中为表格添加了一些样式：

table {
  padding: 0;
}

table tr {
  border-top: 1px solid #cccccc;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

table tr th {
  font-weight: bold;
  border: 1px solid #cccccc;
  margin: 0;
  padding: 6px 13px;
}

table tr td {
  border: 1px solid #cccccc;
  margin: 0;
  padding: 6px 13px;
}

table tr th :first-child, table tr td :first-child {
  margin-top: 0;
}

table tr th :last-child, table tr td :last-child {
  margin-bottom: 0;
}

问题是CSS也会影响组件A的表格，这是有问题的，因为它们的样式不一样。

【问题讨论】：

@Component 装饰器中的 styleUrls 属性相同。
什么都没有改变，markdown文件中的会影响ComponentA老实说我不明白为什么

标签： css angular components markdown

【解决方案1】：

这是因为样式封装。默认情况下，您的组件中的样式仅适用于您的组件创建的元素。

尝试修改托管降价的组件以使用::ng-deep

:host .my-parent-class ::ng-deep
{

    table {
      padding: 0;
    }

    table tr {
      border-top: 1px solid #cccccc;
      background-color: white;
      margin: 0;
      padding: 0;
    }
}

【讨论】：