Réagissez - en utilisant classNames avec css importé

Question

J'utilise rea et j'ai trouvé cette géniale bibliothèque qui vous aide à définir des classes css pour les composants appelés classNames. J'utilise aussi le webpack css-loader pour importer css dans mon composant et quand j'essaie d'utiliser classNames avec import css, j'obtiens une erreur de syntaxe.

Voici mon exemple:

import React from 'react'; 
import styles from './style.css'; 
import classNames from 'classnames'; 

export default class Menu extends React.Component { 
    render() { 
     let style = classNames({ 
      styles.someClass: true 
     }); 
    } 
} 

Comment puis-je utiliser les deux?

Answer 1

Vous pouvez utiliser le computed properties syntax de ES6/2015, par exemple:

import React from 'react'; 
import styles from './style.css'; 
import classNames from 'classnames'; 

export default class Menu extends React.Component { 
    render() { 
    const style = classNames({ 
     // This is a computed property, i.e. surrounded by [] 
     [styles.someClass]: true 
    }); 
    } 
} 

Mais qui est juste pour une seule classe, vous pouvez simplement faire dans ces cas simples quelque chose comme:

const style = this.state.active ? styles.someClass : ''; 

La bibliothèque classNames est particulièrement utile lors de la combinaison de plusieurs classes, comme par exemple:

import React from 'react'; 
import styles from './style.css'; 
import classNames from 'classnames'; 

export default class Menu extends React.Component { 
    render() { 
    const style = classNames(
     // add as many classes or objects as we would like here 
     styles.foo, 
     styles.bar, 
     { [styles.someClass]: this.props.active } 
    ); 
    } 
}