Angular Material ng-tns 类更改了我表中项目的边距，可以使用 CSS 来更改边距，但随后应用了 ng-tns 的另一个变体？

Posted 2023-03-05

【中文标题】Angular Material ng-tns 类更改了我表中项目的边距，可以使用 CSS 来更改边距，但随后应用了 ng-tns 的另一个变体？

【英文标题】：Angular Material ng-tns class changes margin of items in my table, can use CSS to change the margin but then another variant of ng-tns is applied?

【发布时间】：2019-01-24 13:55:13

【问题描述】：

我有一个 Angular 项目，我正在使用 Angular Material 和材料表。

似乎我的表格中的所有文本都应用了 10px 的顶部和底部边距，因为类名为：.ng-tns-c5-1 或 .ng-tns-c6-1 等。

如果不检查元素、找到该类然后使用 CSS 更改该边距，我无法找到更改这些边距的方法。

但是在对应用程序上的其他元素进行一些更改后，.ng-tns-c6-1（例如）更改为：.ng-tns-c4-0，然后我必须更改它。问题是我现在已经这样做了 5-6 次，而且非常痛苦。

因为表格有很多无用的空白区域，整体上看起来很糟糕。

那个类是什么，我可以做些什么来确保边距保持在我设置的 2-3 像素？

这是我的 CSS 中的类型：

.ng-tns-c5-1 
  margin-top: 2px !important;
  margin-bottom: 2px !important;


.ng-tns-c5-0 
  margin-top: 2px !important;
  margin-bottom: 2px !important;


.ng-tns-c6-1 
  margin-top: 2px !important;
  margin-bottom: 2px !important;


.ng-tns-c4-0 
  margin-top: 2px !important;
  margin-bottom: 2px !important;

【问题讨论】：

更新到 Angular v9 后我遇到了同样的问题。如果我在编译器选项中禁用 Ivy，则不会发生这种情况。有谁知道为什么会这样？

【参考方案1】：

您可以使用以下选择所有当前和未来的元素。

[id*='ng-tns-c'] 

【讨论】：

这是一种方法——工作起来就像一个魅力，又学会了另一个 css 技巧。

顺便说一句，您也可以选择所有相同类型的元素（即

）

为什么是[id*='ng-tns-c'] 而不是[class*='ng-tns-c']？

一切都取决于编译成的内容以及您尝试练习的方法

这个有什么具体的地方需要加吗？我尝试将此添加到索引页面样式部分，但没有运气...