Css selector with attribute 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 use a simple css selector with an attribute and it is not working.

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 attribute/property is present I would expect the color to be gray.

Thanks.

Reproduce the issue using the React AppBar example and the selectors in AppBar.css, then trace how react-css-themr applies the theme to the disabled component. Check why the attribute selector does not match while the class and hover selectors do; done means the disabled AppBar uses the gray background without breaking the other selectors.

Written by the indexing model from the issue text.