CSS file not activated

[TFMvdBroek]

print-component-html:

  <div id="print-section" style="text-align: justify;" class="blue">All of our products should be handled only
    by qualified personnel trained in laboratory procedures, and familiar with the
    potential hazards. Information is not available on the potential hazards of
    many compounds. The absence of a warning should not be interpreted as an
    indication of safety.
  </div>
    
<div align="right">
  <button mat-raised-button color="accent" styleSheetFile="assets/printing.css" printSectionId="print-section" ngxPrint><mat-icon>print</mat-icon>&nbsp;&nbsp;Print</button>
</div>

/assets/printing.css:

.blue {
  color: blue;
}

Tried also styleSheetFile="src/assets/printing.css" and [useExistingCss]="true" (including .blue in the component css) but nothing. I'm using Angular 11.

[TFMvdBroek]

Seems with an extra div like this, it works:

<div id="print-section">
    <div class="blue">
            blabla
    </div>
</div>

However, the next problem is that @page { } CSS lines that are in the component CSS are not taken into account. Any way to fix that?

[broem]

I'll take a look at this.

[pcrfernandes]

Seems with an extra div like this, it works:

<div id="print-section">
    <div class="blue">
            blabla
    </div>
</div>

However, the next problem is that @page { } CSS lines that are in the component CSS are not taken into account. Any way to fix that?

It works for me. Thanks!