Multiple class not working

[DavidHenri008]

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.

[palashkaria]

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} />

[DavidHenri008]

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

[palashkaria]

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}>

[palashkaria]

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') + '";'
}

[DavidHenri008]

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.