Using JSS with Angular + components

[upixsoul]

Hi all, I'm new to JSS, it work just great in a single component (app-root), but when I try addinf a second component it stop working properly.

this is the code sample Im using for app root and the other component

import { Component, OnInit } from '@angular/core';
import jss from 'jss';
import { myStyles, red, green, blue } from './app.component.styles';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  public classes: any;
  
  public ngOnInit(): void {
    const sheet: any = jss.createStyleSheet(myStyles as any, { link: true }).attach()
    this.classes = sheet.classes
    sheet.update({
      area: { backgroundColor: red }
    })
  }
}

this is the html

<h1 [class]="classes.title">Angular JSS example</h1>
<input [class]="classes.area" type="textarea">

and css

export const red: string = '#F44336'
export const green: string = '#4CAF50'
export const blue: string = '#2196F3'

export const myStyles = {
  title: {
    textAlign: 'center',
    backgroundColor: '#E0E0E0',
    '&:hover': {
      backgroundColor: '#BDBDBD'
    }
  },
  area: {
    width: '100%',
    height: '10rem',
    color: 'white',
    // @ts-ignore
    backgroundColor: data => data.area.backgroundColor
  }
}

I see JSS working only in the first component, while debugging I see the clases in the second component

const sheet: any = jss.createStyleSheet(myStyles2 as any, { link: true }).attach()
    this.classes = sheet.classes

but while inspecting the html I see the new names are only being applied to the first component

any ideas?