Using Multiple classNames for One Element - React

Adding many css classes to an element can be very handy. You can combine styles while keeping your code from becoming redundant. For example, how can you implement a button that needs two classes? There are three methods:

1. Using className={} and style={}


2. Using cx(), an old React function that's now depreciated


3. Using classNames(), a new function by JedWatson recommeneded by React

Using Only one className

You can use one classname and add more css using the style attribute. But this way there are two different places for css, making it messy.

Using React's classSet - Now Depreciated

Although this version is depreciated, it's interesting to investigate how it works because it's still in some "legacy" code. (And by legacy I mean just a few years ago.)

We import the function cx which takes as many classnames that you would like to add. Simply pass the classname to the function.

What is 'styles'?

Notice we've also imported styles from ./styles.css.
This imports the styles object from a css file you've written. The styles object doesn't need to be explicitly declared. It contains all the classes declared in the css file, without needed to wrap them in anything.

If we use console.log, we find that styles.zoomForm is a long string that represents the path to the style.

We can even explicitly use the string to prove that it will work.

Using JedWatson's classNames - Recommended by React

As mentioned in the: React Documentation

This is the package that is the most recent solution to classnames and should be used by all React developers. It's usage is very similar to cx. Find the usage here: JedWatson classNames

The great thing about this is that you can use conditional classNames by using an object to wrap the classname (using key-value syntax) and a bool.

You can even store classnames in a prop and dynamically add them!

Here we're defining two custom props, color and circle, using propTypes and defaultProps.

In _getClassNames(), we first extract color and circle from this.props (so that we don't have to write this.props.color).

Then we define an empty object propClassNames with two attributes.

The first attribute is a css class styles.default (resolved from styles[color] - see defaultProps), set to true.

The second attribute is a css class styles.circle, set to false by default (see defaultProps)

In render(), we extract className from this.props.

className is a not a custom prop, it's an attribute that can be used on any tag like so.

Back in render(), we then return our component and pass three classnames, two from this._getClassNames() (default & circle) and one from className (prevSlide in this case). Giving our element all three styles!

For more tutorials of the different methods, see: Eric Binnion's Post and Randy Coulman's Post