css - 在 Igx Grid 列单元格中编辑字体的最佳方法

Question

找不到更改应用程序中所有网格字体的好方法。我知道，[cellClasses]但[cellStyles]似乎没有必要为应用程序的每一页上的每一列设置这些。有没有办法在全局样式中做到这一点？谢谢

Answer 1

实际上，跨多个组件应用每列（和单元格）的样式对于您尝试做的事情来说有点过分。这些更适合自定义条件样式。

网格和单元格通常会继承字体，因此更改非常简单 - 您可以添加一个范围为整个igx-grid或特别是igx-grid-cell这样的规则：

igx-grid-cell {
  font-family: monospace
}

Per Abdul 的回答主要styles.scss是排版在应用程序范围内应用的可能候选者（避免潜在的视图封装问题）。这是一个应用上述内容的快速示例： https ://stackblitz.com/edit/grid-cell-font?file=src/styles.scss

Answer 2

是的，我有一段时间没有使用 Angular，但是我记得你可以在src/styles.cssorsrc/styles.scss或中设置全局样式src/styles.sass。将您的网格样式添加到此文件中，您应该一切顺利。

这是angular global-styles和angular File structure的链接以获取更多信息。

Answer 3

最好在scss主题设置中使用排版 mixin。这样，您将修改所有组件的字体，而不仅仅是单个网格单元格。看看这篇文章，它解释了如何修改与排版相关的所有内容：

https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/typography.html

字体系列的示例：

$my-type-scale: igx-type-scale();

@include igx-typography(
    $font-family: "'Roboto', sans-serif",
    $type-scale: $my-type-scale,
    $base-color: #484848
);