Skip to content


Created: 2018-05-02 16:17:45 -0700 Modified: 2018-05-02 16:21:46 -0700

This conditionally joins CSS classes together.

First of all, Chrome can search based on class names if you include a period at the beginning of your search term, e.g. “.undefined”, so you can see if this is happening to you pretty quickly.

The cause is this issue:

const cssClasses = classNames({
[styles.pregameHeader]: true,
[this.props.className]: true,

As shown above, if “this.props.className” isn’t defined, then you’ll get “undefined” showing up in the DOM.

There are multiple solutions/workarounds:

  1. Fork the library and change the behavior here. The only issue is that “undefined” is a valid CSS class, so you need to make sure not to coerce the string “undefined” into the value undefined.
  2. In the specific case above, since there is no condition (i.e. they’re both true), switch to the non-object version: classNames(styles.pregameHeader, this.props.className) and it will automatically ignore undefined values.
  3. Only include the value if it exists, e.g.

classNames({[this.props.className]: !_.isNil(this.props.className)});

  1. Specify a default prop