Impossible d'importer des styles à l'aide de css-modules, de webpack et de réagir.

Question

Je personnalise mon application de réaction. J'utilise css-modules avec webpack. Voici ma config:

{ test: /\.css$/, loaders: ["style", "css?modules"] }, 

J'ai appelé mon composant, fait un café et maintenant ça ne fonctionne pas. J'ai donc une feuille de style que je veux utiliser. Je suis en train d'importer avec:

import styles from "./search.css"; 

Mais, quand je fais dans mon élément, styles n'est pas défini. Aucun de mes styles n'est maintenant appliqué. Voici un exemple de la façon dont je l'utilise:

// the chrome inspector only shows the first two styles, the last is not there 
<div className={["col-md-2", "col-lg-1", styles.startTimes]}> 

Pourquoi styles vide?

Answer 1

Finalement élaboré. Ce n'est pas la bonne syntaxe:

<div className={["col-md-2", "col-lg-1", styles.startTimes]}> 

Vous avez vous utilisez classNames et faire à la place:

<div className={cx("col-md-2", "col-lg-1", styles.startTimes)}> 

Vous devez également utiliser uniquement les noms de classe dans votre CSS. Si vous nommez les noms de tag directement (h1, etc.), ils ne sont pas appliqués localement.