Übergeben Sie Style-Array zu React Component

Question

Ich möchte ein Array von Stilen an eine React Component mit Postcss-Loader und CSS-Module übergeben. Meine webpack.config.file für CSS-Dateien kompiliert sieht wie folgt aus:

loaders: [ 
    'style-loader', 
    'css-loader?modules&importLoaders=1&localIdentName[name]__[local]___[hash:base64:5]', 
    'postcss-loader' 
], 

Meine Reaktion Component-Datei wie folgt aussieht:

import styles from './cssFile.css'; 
class Component extends React.Component{ 
    render(){ 
     return(
      <div className={[styles.spinner, styles.spinner_2]}></div> 
     ) 
    } 
} 

Immer, wenn ich nur einen Stil zu classname geben sie es richtig lädt, aber wenn Ich übergebe ein Array, es löst keine von ihnen. Stattdessen verkettet es es mit einem Komma für den Kompilierungsklassennamen.

Wie kann ich mehrere Stile an ein Element übergeben?

Answer 1

Reagieren der Klassenname erwartet eine Reihe von Klassennamen und kein Array:

import styles from './cssFile.css'; 
class Component extends React.Component{ 
    <div className={ [styles.spinner, styles.spinner_2].join(' ') }></div> 
} 

Answer 2

Sie classnames dafür verwenden können. Zum Beispiel:

import styles from './cssFile.css'; 
import classNames from 'classnames'; 

class Component extends React.Component { 
    render() { 
    return <div className={classNames(styles.spinner, styles.spinner_2)}></div> 
    } 
} 

Aus dem Klassennamen Dokumentation:

Die Klassennamen Funktion nimmt eine beliebige Anzahl von Argumenten, die ein String oder ein Objekt sein kann. Wenn der Wert des Schlüssels falsch ist, wird er nicht in der Ausgabe enthalten sein.