Pass style array to React Component

Question

I want to pass an array of styles to a React Component using postcss-loader and css modules. My webpack.config.file for compiling css files looks like this:

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

My React Component file looks like this:

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

Whenever I pass only one style to className it loads it correctly but when I pass an array it does not resolve any of them. Instead it concatenates it with a comma on the compile class name.

How can I pass several styles to an element?

It might just be in the code you've pasted in SO but your class syntax is invalid, you need to define a render method and return the React element. Other than that @ori-drori is correct in saying className must be a string. — Richard Scarrott
– Richard Scarrott, Commented Oct 3, 2016 at 12:44

Ori Drori · Accepted Answer · 2016-08-17 23:50:51Z

6

React's className expects a string of class names, and not an array:

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

answered Aug 17, 2016 at 23:50

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vsevolod Okhrin · Accepted Answer · 2016-10-14 08:47:20Z

2

You can use classnames for this. For example:

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

From the classnames documentation:

The classNames function takes any number of arguments which can be a string or object. If the value of the key is falsy, it won't be included in the output.

answered Oct 14, 2016 at 8:47

Vsevolod Okhrin

1114 bronze badges

Collectives™ on Stack Overflow

Pass style array to React Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related