Multiple class not working

[David Henri]

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 => (
<AppBar theme={theme} className="disabled"> App Example </AppBar>
);
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.

[Palash Karia]

did you pass the theme to you appBar?

what is the 'App Example'?

<AppBar theme={props.theme} /> should work

EDIT: if AppBar has a 'disabled' class defined, that is. Otherwise what you want to do is
<AppBar className={disabled ? theme.disabled : null} />

[David Henri]

Yes. I just updated my question since I did not see that my code was not showing properly.

[Palash Karia]

in your example you are not using themr at all. This is a question for react-toolbox. You need to pass theme.disabled, check their docs http://react-toolbox.io/#/components/app_bar

do
<AppBar theme={theme} className={theme.disabled}>

[Palash Karia]

Also, you need to configure sassLoader
https://github.com/react-toolbox/react-toolbox/tree/master#using-sass-loader

sassLoader: {
  data: '@import "' + path.resolve(__dirname, 'theme/_theme.scss') + '";'
}

[David Henri]

Thanks. I understand I do not use themr, but React-Toolbox is using it. May question was really about why adding the disabled className manually was not working as expected. I was able to make it work by using className={theme.disabled} but I had to declare the .disable class separately in the css.

I appreciate your time.