In progetto React SPFx gli stili vengono gestiti tramite SCSS, come ad esempio questo
SCSS: ConfigurableView.module.scss
.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
TypeScript
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
CSS
.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
HTML
<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
SCSS
.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
CSS
.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
TypeScript
<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.
Potrebbe interessarti anche: