React - using classNames with imported css

Question

I'm using react and I found this awesome library that helps you define css classes for components called classNames. I'm also using the webpack css-loader in order to import css into my component and when trying to use classNames with import css I get a syntax error.

Here is my example:

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

How can I use both?

ctrlplusb · Accepted Answer · 2016-06-15 06:03:31Z

14

You can use the computed properties syntax of ES6/2015, for example:

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

But that is just for a single class, in these simple cases you could just do something like:

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

The classNames library is especially useful when combining multiple classes, like so:

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

edited Jun 15, 2016 at 6:03

answered Jun 15, 2016 at 5:56

ctrlplusb

13.2k7 gold badges58 silver badges57 bronze badges

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

2 Comments

yokodev Over a year ago

I have plain css clases next to my component ( not using import) so how can I use this classes. do I create a variable using template literals ?? I don't have to make the classes JS like (i.e btn-hover to btnHover) hopepully this makes sense ...

ctrlplusb Over a year ago

The classnames package works with plain old strings too. 👍 github.com/JedWatson/classnames

Collectives™ on Stack Overflow

React - using classNames with imported css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related