I am trying to display a Handsontable to my Angular frontend. I've gotten the basic example https://handsontable.com/docs/angular-simple-example/ to work in a brand new Angular project, but when I add the exact code to my existing repo, I cannot get the necessary CSS styles to apply. If I check sources on my browser, the style sheet is imported but the styles are not applied to the elements, resulting in an out of position and distorted table.

Here is the source code: table.component.html

<div>
   <hot-table
   [data]="dataset"
   [colHeaders]="true"
   [rowHeaders]="true"
   height="auto"
   licenseKey="non-commercial-and-evaluation">
   <hot-column data="id" [readOnly]="true" title="ID"></hot-column>
   <hot-column data="name" title="Full name"></hot-column>
   <hot-column data="address" title="Street name"></hot-column>
   </hot-table>
</div>

component:

import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';

@Component({
  selector: 'app-root',
  templateUrl: './table.component.html',
  styleUrls: ['./app.component.css']
})
class AppComponent {
  dataset: any[] = [
    {id: 1, name: 'Ted Right', address: 'Wall Street'},
    {id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
    {id: 3, name: 'Joan Well', address: 'Broadway'},
    {id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
    {id: 5, name: 'Michael Fair', address: 'Lombard Street'},
    {id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
    {id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
    {id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
  ];
}

styles

@import '~handsontable/dist/handsontable.full.css';

I would appreciate any and all help!