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

【问题标题】：Best way to edit font in Igx Grid column cells在 Igx Grid 列单元格中编辑字体的最佳方法
【发布时间】：2020-09-28 02:33:00
【问题描述】：

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

【问题讨论】：

标签： css angular ignite-ui ignite-ui-angular

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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
);

【讨论】：