在 SharePoint 框架 (SPFX) / Angular 中使用 ag-Grid - 样式失败

Posted 2023-03-28

【中文标题】在 SharePoint 框架 (SPFX) / Angular 中使用 ag-Grid - 样式失败

【英文标题】：Using ag-Grid within SharePoint Framework (SPFX) / Angular - styling failure

【发布时间】：2021-04-06 13:09:31

【问题描述】：

我们正在探索使用带有 Angular 元素的 SharePoint 框架 (SPFX) 的自定义 SharePoint Web 部件。我想使用 ag-Grid 但网格内容的样式定义似乎没有得到应用。在介绍 here 之后，html 如下所示：

  <div class="ag-theme-material">
<ag-grid-angular
  style="width: 500px; height: 500px;"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular></div>

但是渲染出来的页面内容是这样的：

我尝试了几个捆绑的主题，但都以同样的方式失败。

有没有人尝试过将 ag-Grid 与 Angular Elements 和 SharePoint 框架一起使用？有关如何使样式起作用的任何建议？

【参考方案1】：

所以，你有文档，但你没有以正确的方式使用类。

应该为ag-grid添加该类，但不要为额外的div添加该类

在你的情况下应该是：

<ag-grid-angular
  style="width: 500px; height: 500px;"
  class="ag-theme-material"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

另外一件重要的事情是根样式中的样式定义。

【讨论】：

感谢@shutsman 跟进。不幸的是，将类属性放入内部（如文档所述）是我开始的方式。我尝试将类移动到封闭的 div 标签（在另一篇文章中描述）试图找到修复。我还将 ag-grid .css 导入添加到 src/styles.css。有没有其他我可以尝试的想法？

您是否遵循本指南ag-grid.com/angular-grid/#add-ag-grid-to-your-project ？

是的，一开始。因为这是一个 Angular Elements 项目（不是常规的整个应用程序 Angular 项目），所以只有 [component].scss 文件中的样式定义（而不是 src/styles.css 中的样式定义）会进入 SPFX 项目。所以我不得不将 ag-grid 样式的导入语句（带有更新的路径）移动到 [component].scss 文件中，以将它们放入 SPFX 项目中。不幸的是，看起来解决方案仍然没有将 ag-grid 样式定义应用于 ag-grid 元素。它们看起来仍然像上面的屏幕截图。

在挖掘动态呈现的页面内容后，看起来应该向右移动的内容具有应该移动它的样式属性，但内容一直在左侧。例如，“Celica”有 element.style / left: 200px，“35000”有 ... left: 400px，但它们都在左边。因此，这可能更多地是 SharePoint 的限制或对呈现元素首选样式的负面影响的问题。啊！

@YonatanNir 周一可以去看看，好像我的项目有类似的情况