React - using classNames с импортированным css

Question

Я использую реакцию, и я нашел эту удивительную библиотеку, которая поможет вам определить классы css для компонентов, называемых classNames. Я также использую webpack css-loader для импорта css в свой компонент и при попытке использовать classNames с import css. Я получаю синтаксическую ошибку.

Вот мой пример:

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 
     }); 
    } 
} 

Как я могу использовать оба?

Answer 1

Вы можете использовать computed properties syntax из ES6/2015, например:

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 
    }); 
    } 
} 

Но это только для одного класса, в этих простых случаях вы можете просто сделать что-то вроде:

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

Библиотека classNames особенно полезна при объединении нескольких классов, например:

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 } 
    ); 
    } 
}