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

Question

我們正在探索自定義 SharePoint Web 部件，使用 SharePoint 框架 (SPFX) 和 ZC31Z54466949Z 框架 (SPFX)。 我想使用 ag-Grid 但網格內容的樣式定義似乎沒有得到應用。 按照這里的介紹，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 元素和 SharePoint 框架一起使用？ 關於如何使樣式起作用的任何建議？

Answer 1

因此，您有文檔，但沒有以正確的方式使用 class。

class 應該為ag-grid添加，但不是為額外的 div

在您的情況下，它應該是：

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

還有一件重要的事情是 styles 在根 styles 中的定義。