Multiple class not working

Hi,
I am using the React-Toolbox and I understood that it uses the react-css-themr behind the scene.
I am trying to add a class dynamically to do the styling but it is not working as expected.

My react code:

> import React from 'react';
> import PropTypes from 'prop-types';
> import { AppBar } from 'react-toolbox/lib/app_bar';
> import theme from './AppBar.css';
>
> const PurpleAppBar = props => (
> `
> App Example
> `
> );
> export default PurpleAppBar;

My css file:
> .appBar {
> background-color: blue;
> }
> .appBar.disabled {
> background-color: gray;
> }
> .appBar:hover {
> opacity: 0.5;
> }

The AppBar is blue and the hover is working. However since the disabled class is added I would expect the color to be gray.

Thanks.

Reproduce the report using the React snippet, react-toolbox AppBar, and AppBar.css shown in the issue. Inspect how the theme and className are applied, then verify that an AppBar with className="disabled" uses the gray .appBar.disabled rule while retaining the blue default and hover behavior.

Written by the indexing model from the issue text.