Массив массива переходов для ответа на компонент

Question

Я хочу передать массив стилей компоненту React, используя модули postcss-loader и css. Мой webpack.config.file для компиляции файлов CSS выглядит следующим образом:

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

Мой Реагировать компонент файл выглядит следующим образом:

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

Всякий раз, когда я прохожу только один стиль Classname он загружает его правильно, но когда Я передаю массив, который не разрешает ни один из них. Вместо этого он объединяет его с запятой в имени класса компиляции.

Как передать несколько стилей элементу?

Answer 1

РЕАКТ имя класса ожидает строку имен классов, а не массив:

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

Answer 2

Вы можете использовать classnames для этого. Например:

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

Из документации:

имен классов

Функции принимает имен классов любого количества аргументов, которые могут представлять собой строку или объект. Если значение ключа ложно, оно не будет равно , включенному в выход.