Gestione classi CSS in SPFx nel modulo SCSS (no trasformation)

In progetto React SPFx gli stili vengono gestiti tramite SCSS, come ad esempio questo

SCSS: ConfigurableView.module.scssCopia

.configurableView {
  overflow: hidden;
  padding: 0;
  color: "[theme:bodyText, default: #323130]";
  color: var(--bodyText);
  &.teams {
    font-family: $ms-font-family-fallbacks;
  }
}

nel codice TypeScript si può far riferimento alla classe tramite styles.configurableView

TypeScriptCopia

import styles from "../ConfigurableView.module.scss";
...
<section className={`${styles.configurableView} ${ hasTeamsContext ? styles.teams : "" }`}>
    ...
</section>

una volta compilato il file SCSS viene trasformato in un CSS simile a questo

CSSCopia

.configurableView_e04ec691{
    overflow:hidden;
    padding:0;
    color:#323130;
    color:var(--bodyText)
}
.configurableView_e04ec691.teams_e04ec691{
    font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif
}

dove le classi vengono rese univoche tramite l'aggiunta di un suffisso, quindi anche l'HTML risultante conterrà nuove classi

HTMLCopia

<section class="configurableView_e04ec691 ">
...
</section>

Questo è il comportamento standard per evitare conflitti di nomi con altre classi CSS esistenti.

SCSS No trasformation

In alcune situazioni particolari, può tornare utile avere dei nomi classe non trasformati nel CSS risultate.

Si può raggiungere lo scopo utilizzando la pseudo-classe :global

SCSSCopia

.viewModelBase {
  :global{
    .sgart-spfx-cv-button {
      box-sizing: border-box;
      background-color: "[theme:bodyBackground, default: #ffffff]";
      color: "[theme:bodyText, default: #323130]";
      color: var(--bodyText);
      position: relative;
      display: flex;
      align-items: center;
      @include ms-fontSize-14;
      ...
  }
}

tutti i nomi classe all'interno di :global { } non vengono trasformati

CSSCopia

.viewModelBase_e04ec691 .sgart-spfx-cv-button{
    box-sizing:border-box;
    background-color:#ffffff;
    color:#323130;
    color: var(--bodyText);
    position:relative;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    font-size:14px;
    ...
}

infatti la classe .sgart-spfx-cv-button non è stata trasformata e può essere usata nel TypeScript in questo modo

TypeScriptCopia

<section className={`${styles.configurableView} ${ hasTeamsContext ? styles.teams : "" }`}>

  <div className={styles.viewModelBase}>
    <div className="sgart-spfx-cv-button">
        ...
    </div>
  </div>
  ...
</section>

Esiste anche la classe :local { } per tornare al comportamento standard con l'aggiunta del suffisso in automatico.