React + Sass + Webpack lokales Styling Problem

Question

Ich benutze eine 3rd party react component, und ich habe Probleme bei der Konfiguration meiner Sass richtig. Diese Komponente erstellt eine Reihe von <li> HTML-Tags, und wenn einer der <li> angeklickt wurde, fügt Hinzufügen fügt dieses Element einen "aktiven" Klassennamen: <li class="active">. Ich möchte die css für das aktive<li> Element anpassen. Dazu habe ich eine Test.scss Datei mit folgendem Inhalt:

.tag_input li.active { 
    font-weight: bold; 
    text-decoration: underline; 
    color: red; 
} 

Zur Verwendung dieses Styling, kann ich folgend reagiert

import classes from './Test.scss' 
export const Test = (props) => { 
    return (
    <ReactTags 
     classNames={{ 
      tags: classes.tag_input, 
     }} 
    ... 
    > 
) 
} 

Das Problem ist, dass, wenn Webpack lädt diese Sass-Datei, Es verwendet css-loader, die jeden Klassennamen in jeder lokalen .sass-Datei in das folgende Format konvertiert: "localIdentName = [name] _ [local] __ [hash: base64: 5]". Das bedeutet, dass mein CSS nicht mehr auf <li class="active"> zutrifft. Stattdessen funktioniert es jetzt für <li classname="Test__active___2LBGS">. Ich habe gedacht, von zwei (sehr schlecht) Lösungen bisher:

1. ich webpack irgendwie neu konfigurieren, um nicht bestimmte Namen CSS-Klasse benennen Sie die localIdentName mit
2. ich <ReactTags /> irgendwie bekommen den Klassennamen zu verwenden: Test__active___2LBGS

Keine von beiden scheint machbar, also bin ich ziemlich fest !! Jede Hilfe wird sehr geschätzt.

Answer 1

Wie in dem css-loader documentation unter lokalen Bereich angegeben Sie anwenden können: global zu Arten, dass Sie den Lader konvertieren nicht wollen:

:global (.tag_input li.active) { 
    font-weight: bold; 
    text-decoration: underline; 
    color: red; 
} 

Answer 2

Sie den Klassennamen prop verwenden sollte und eine setzen aktiven Zustand würden Sie die Requisiten

<ReactTags className={props.active ? classes.tagInputActive : classes.tagInput}/> 

aktualisieren