Il Introduzione a CSS-in-JS il tutorial sullo sviluppo web ha presentato alcuni dei vantaggi di CSS-in-JS e ha spiegato perché è una delle tendenze più calde nello sviluppo web. A quanto pare, uno dei principali vantaggi della combinazione di CSS e JavaScript è che puoi modificare istantaneamente l’aspetto di molti elementi della pagina con poche righe di codice. Sebbene lo stile dinamico da solo non sia un motivo sufficiente per saltare sul carro dei CSS-in-JS, se hai deciso di provarlo per alcuni dei suoi altri vantaggi, potresti voler impostare gli stili al volo. Caso in questione, il Utilizzo di un servizio angolare per leggere le variabili Sass La demo che abbiamo parzialmente trasferito a CSS-in-JS ha consentito all’utente di impostare alcuni colori del tema in fase di esecuzione:

Quindi, quell’app è il candidato perfetto per testare le capacità di stile dinamico di JSSche è una libreria indipendente dal framework che abbiamo utilizzato per implementare CSS-in-JS.

Collegamento di istanze di regole JSS al DOM

Nel Introduzione a CSS-in-JS tutorial di programmazione web, abbiamo appreso che il metodo per creare un foglio di stile è il nome appropriato createStyleSheet(). Oltre all’oggetto stili, possiamo anche passargli alcune opzioni. Non esamineremo tutte le opzioni qui, tranne che per collegamento. È un booleano che collega le istanze jss Rule con la controparte DOM CSSRule nativa in modo che gli stili possano essere modificati dinamicamente tramite funzioni di attributo. è falso per impostazione predefinita perché ha alcuni costi di prestazioni, ma abbiamo buone ragioni per attivarlo nella nostra app.

Ecco un riepilogo dell’inizializzazione jss e del codice di generazione del foglio di stile dell’ultima volta, insieme al parametro delle opzioni extra:

private stylesheet: StyleSheet;

ngOnInit(): void {
  jss.use(jssPluginNested());
  jss.setup(preset());
  
  // Compile styles, apply plugins.
  this.stylesheet = jss.createStyleSheet(styles, {link: true}).attach();
}

Ora siamo pronti per aggiornare alcune Regole CSS.

La funzione JSS update()

Dando un’occhiata al feed.component.styles.ts file che abbiamo creato nell’ultimo articolo, puoi vedere che le ultime tre proprietà utilizzano una funzione per impostare i loro valori:

export const styles: Object = {
  newsImage: {
    cursor: 'pointer',
    marginTop: '25px',
    display: 'flex',
    width: '10rem',
    height: '10rem',
    marginRight: '0.6rem',
    marginLeft: '0.8rem',
    borderRadius: '1rem',
    backgroundColor: styles => styles.newsImage.backgroundColor,
    '&:hover': {
      backgroundColor: styles => styles.newsImage['&:hover'].backgroundColor,
    },
    '&:focus': {
      'border-color': styles => styles.newsImage['&:focus'].borderColor
    }
  }
};

È così che JSS supporta lo stile dinamico. Potresti provare a impostare una proprietà direttamente in questo modo:

this.stylesheet.getRule('newsImage').style['height'] = '5rem';

Tuttavia, ciò non influirà sul foglio di stile sottostante, solo sulla mappatura delle regole JSS.

Il modo JSS per modificare al volo i valori delle regole CSS consiste nel chiamare le istanze StyleSheet aggiornare() funzione. Imposta uno o più valori di proprietà per una regola contemporaneamente. Quindi, per impostare i nostri tre colori, invocheremmo aggiornare() come segue:

this.stylesheet.update({
  newsImage: { 
    backgroundColor: this.backgroundColor,
    '&:hover': {
      backgroundColor: this.hoverBackgroundColor
    },
    '&:focus': {
      outline: this.focusBorderColor
    }
  }
});

La funzione di callback di ciascuna proprietà riceve quindi l’oggetto Rule passato come attributo dell’oggetto stili più grande, proprio come abbiamo definito i nostri stili. Se ometti una proprietà dinamica da una regola, il valore di tale proprietà verrà restituito non definito. Questo non è un problema per le proprietà di primo livello come il colore di sfondo; annullerà semplicemente qualsiasi valore esistente. Tuttavia, le proprietà nidificate come le due pseudo-classi genereranno un errore simile al seguente:

Error: styles.newsImage['&amp:focus'] is undefined

Poiché il messaggio di errore riassume in modo così eloquente, ciò accade perché stiamo tentando di accedere alle proprietà di un oggetto indefinito.

Un modo per aggirare ciò, oltre a fornire tutti i valori dinamici, è fornire un fallback all’interno della funzione di callback:

export const styles: Object = {
  newsImage: {
    // ...
    '&:focus': {
      outline: styles => styles.newsImage['&:focus'] 
                       ? styles.newsImage['&:focus'].outline
                       : '#CCCCCC'
    }
  }
};

Dovremo fornire alcuni valori iniziali se vogliamo che l’immagine delle notizie abbia alcuni colori di sfondo e bordo predefiniti quando la pagina viene caricata per la prima volta. Poiché stiamo già inizializzando jss in ngOnInit()quando il Componente del feed riceve il @Ingresso variabili, possiamo impostarle lì:

private stylesheet: StyleSheet;

ngOnInit(): void {
  jss.use(jssPluginNested());
  jss.setup(preset());
  
  // Compile styles, apply plugins.
  this.stylesheet = jss.createStyleSheet(styles, {link: true}).attach();
  this.updateColors();
}

Il updateColors() contiene la chiamata a this.stylesheet.update() metodo sopra in modo da poterlo invocare ogni volta che l’utente cambia i pulsanti di opzione a colori.

Leggere: Stile di testo dinamico in angolare

Aggiornamento dei colori

Facendo clic su un pulsante di opzione si aggiorna la variabile di colore sottostante nel componente dell’app, che attiva il ngOnChanges evento nel componente feed. Lì, possiamo testare le modifiche alle nostre variabili di colore e invocarle updateColors() di conseguenza:

ngOnChanges(changes: SimpleChanges): void {
  if ( this.stylesheet
    && (changes.backgroundColor 
     || changes.hoverBackgroundColor 
     || changes.focusBorderColor
    )
  ) {
    this.updateColors();
  }
}

Si noti che dobbiamo anche verificare che il foglio di stile sia stato inizializzato come primo ngOnChanges l’evento si attiva per l’iniziale @ingresso valori, come accade prima ngOnInit.

Esplorando la demo

Puoi guardare il codice che aggiorna i colori dell’immagine delle notizie nel file demo stackblitz. È lo stesso che è stato introdotto nel tutorial Introduzione ai CSS-in-JS, poiché includeva già la funzionalità di aggiornamento.

Considerazioni finali sullo stile CSS-in-JS

In un’applicazione reale, la gestione dei colori JSS trarrebbe vantaggio dall’essere eseguita in un servizio, in modo che il componente Feed non debba occuparsi dei metodi e della struttura dell’oggetto JSS. Suggerirei di spostare tutto il codice di inizializzazione JSS e updateColors() metodo al servizio. Aggiorna colori() sarebbe particolarmente facile da spostare perché il i cambiamenti parametro potrebbe essere semplicemente passato alla funzione di servizio.

Leggi di più Tutorial di sviluppo web JavaScript.