Using ag-Grid within SharePoint Framework (SPFX) / Angular - styling failure

Question

We're exploring custom SharePoint Web Parts using SharePoint Framework (SPFX) with Angular Elements. I'd like to use ag-Grid but the style definitions of the grid contents don't seem to get applied. Following the intro here , the HTML looks like this:

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

But the rendered page content looks like this:

I've tried several of the bundled themes, and they all fail the same way.

Has anyone tried using ag-Grid with Angular Elements and SharePoint Framework? Any suggestions on how to get the styling to work?

Answer 1

So, you have documentation but you don't use class in the correct way.

The class should be added for ag-grid but not for extra div

in your case it should be:

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

One more one of the important things is definitions of styles in root styles.