angular-6-datatable 的自定义 CSS答案

【问题标题】：Custom Css for the angular-6-datatableangular-6-datatable 的自定义 CSS
【发布时间】：2019-08-05 11:05:32
【问题描述】：

我正在使用Angular-6-datatable。我想为表头和分页器图标应用一些自定义 CSS。我们如何使用自定义 CSS 覆盖当前 CSS 我有一个全局 css 文件，我在其中添加“a”标签的颜色。在他们使用的包中 @Input("by") sortBy: string;

并用模板附加它

<a style="cursor: pointer;color: #ffffff;" (click)="sort()" class="text-nowrap"> <ng-content></ng-content> <span *ngIf="isSortedByMeAsc" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span *ngIf="isSortedByMeDesc" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> </a>

当我检查没有颜色属性的元素时，我尝试在运行时在模板中给出颜色。

这里是 stackblitz 链接：stackblitz Application

【问题讨论】：

这只是一个 Bootstrap 风格的表格。在 app.component.html 中，只需使用 CSS 以正常方式为表格设置样式：<table class="table table-striped" 并使用您自己的类而不是引导类。
您必须在此处输入minimal reproducible example，在您的问题中，并且永远不要访问任何第三方网站！
我有我自己的 css 文件，我用一些颜色覆盖“a”标签，如果你 c 标题部分 Age 。他们正在使用 @Input("by") sortBy: string;并将附加到模板中。我想改变那个标签的颜色

标签： css angular datatable

【解决方案1】：

通过在 style.css 中添加以下代码，我们可以覆盖该属性

table > thead > tr> th > mfdefaultsorter > a { color: #ffffff !important; font-weight: bold; }

【讨论】：

【解决方案2】：

您可以在应用组件中选择不同的 css 文件。例如：

  @Component({
  selector: 'your-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
  })

您可以创建一个新的 CSS 文件并编辑 styleUrl 行。

【讨论】：

SO 上不允许仅链接答案。形成您自己的答案或完全删除它：stackoverflow.com/help/how-to-answer
我是 Stack 的新手，在准备我的 OCA 时，我从你们那里得到了很多帮助。我以为我会开始回报。我添加了一段代码来澄清。这符合标准吗？
这要好得多。总是解释你的代码，这是现在 SO 上经常出现的问题，因为人们只是在没有解释的情况下脱口而出代码。