javascript - Τα στυλ CSS δεν εφαρμόζονται στο innerHTML

Εμφανίζω μια κάρτα bootstrap με innerHTML στο αρχείο TS μου αλλά τα στυλ δεν εφαρμόζονται σε αυτό το περιεχόμενο. Νομίζω ίσως οφείλεται στο γεγονός ότι τα στυλ φορτώνονται πριν εμφανίσει το component την κάρτα, οπότε τα στυλ δεν λειτουργούν. Έχεις κάποια συμβουλή για αυτό; Χρησιμοποιώ Angular 12.

ο κώδικάς μου TypeScript:

    constructor(private _route: ActivatedRoute, private router: Router) {

    this.noticias = [
      {
        id: '1',
        vTitulo: 'Convención anual de la Asociación Mexicana de Semilleros (AMSAC)',
        dFecha: 'DIC 2021'
      },
      {
        id: '2',
        vTitulo: 'El “Arroz Auténtico Americano”',
        dFecha: 'DIC 2021'
      },
      {
        id: '3',
        vTitulo: 'Se incrementa balanza comercial agroalimentaria',
        dFecha: 'DIC 2021'
      },
      {
        id: '4',
        vTitulo: 'Ciencia e innovación en el campo, clave para evitar escasez de alimentos en 2050: Bayer',
        dFecha: 'DIC 2021'
      },
      {
        id: '5',
        vTitulo: 'Corteva es reconocido por “Mejor programa de voluntariado”',
        dFecha: 'DIC 2021'
      }
    ]

     
     $.when( $.ready ).then(() => {
      
      const noticiasList = document.getElementById('noticiasList');

      let displayNoticias = (noticias: any[]) => {
        const htmlString = noticias
          .map((noticia) => {
            return `
              <div class="card cardNoticias">
                <div class="d-flex position-absolute top-0 end-0">
                  <h5 class="mb-0 fecha text-uppercase">${noticia.dFecha}</h5>
                </div>
                <div class="card-body card-body-noticiasList text-center d-flex align-items-center justify-content-center">
                  <h4 class="card-text fw-bold mt-3">${noticia.vTitulo}</h4>
                  <a href="" class="stretched-link"></a><!--Dentro del href se pondria el link hacia el articulo-->
                </div>
              </div>  
            `
          })
          .join('');
        
        if(noticiasList) noticiasList.innerHTML = htmlString;  
      }


      let filtradoNoticias = this.noticias.filter((noticia) => {
        return (
          noticia.vTitulo.toLowerCase().includes(this.busqueda.toLowerCase())
        );
      })
      displayNoticias(filtradoNoticias); 
      
     }) 
  }

Εδώ είναι που εμφανίζω το innerHTML

<div class="col-lg-12 ms-2 ps-lg-3 pe-lg-2 mt-2 mt-xl-2 mb-5">
    <h1>NOTICIAS ENCONTRADAS</h1>
    <div id="noticiasList">
      
    </div>
  </div>

Και τα στυλ που θέλω να εφαρμόσω στην κάρτα

.noticiasList .cardNoticias{ 
  background-color: gray; 
}

.noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

Βασικά, το ts παίρνει ένα string που θέλει ο χρήστης να βρει και φιλτράρει τον τίτλο των ειδήσεων και εμφανίζει αυτά που έχουν το string στον τίτλο

Απάντηση #1

noticiasList είναι το αναγνωριστικό του στοιχείου, όχι μια κλάση που έχει ανατεθεί στο στοιχείο.

Έτσι, για να αναφερθείτε σε αυτό το div στο CSS, ίσως θελήσετε να χρησιμοποιήσετε τον επιλογέα # (που χρησιμοποιείται για IDs).

Έτσι το απόσπασμα CSS σας θα κατέληγε ως εξής:

#noticiasList .cardNoticias{ 
  background-color: gray; 
}

#noticiasList .cardNoticias .card-body-noticiasList {
  width: 100%;
  padding-right: 30px;
}

.fecha {
  background-color: lightgray;
  margin-right: 1px;
  text-align: center;
  width: 30px;
}

Για περισσότερες πληροφορίες, ρίξτε μια ματιά στο https://www.w3schools.com/cssref/sel_id.asp