React style by class name - css

Question

I'm implementing a sidebar following this example but can't figure out how to apply the styles for each className...
This is what I've tried, but there are no styles applied...
Component:
import React from 'react';
import styles from '../stylesheets/menu.css';
var Parent = React.createClass({
getInitialState(){
return {sidebarOpen: false};
},
handleViewSidebar(){
this.setState({sidebarOpen: !this.state.sidebarOpen});
},
render() {
return (
<div>
<Header onClick={this.handleViewSidebar} />
<SideBar isOpen={this.state.sidebarOpen} toggleSidebar={this.handleViewSidebar} />
<Content isOpen={this.state.sidebarOpen} />
</div>
);
}
});
var SideBar = React.createClass({
render() {
var sidebarClass = this.props.isOpen ? 'sidebar open' : 'sidebar';
return (
<div className={sidebarClass}>
<div>I slide into view</div>
<div>Me too!</div>
<div>Meee Threeeee!</div>
<button onClick={this.props.toggleSidebar} className="sidebar-toggle">Toggle Sidebar</button>
</div>
);
}
});
export default Parent;
Styles:
.sidebar {
position: absolute;
top: 60px;
}
.sidebar-toggle {
position: absolute;
top: 20%;
}
.sidebar.open {
left: 0;
}
webpack.config :
module: {
loaders: [
{
test: /\.css$/,
loader: 'css-loader'
}
]
}
Partial folder structure:
client
--stylesheets
----menu.css
--components
----Sidebar.js

Answer 1

You are importing the styles as an object:
import styles from '../stylesheets/menu.css';
This can be used for CSS-in-JS, but in your case it will not work.
Try changing it to:
import '../stylesheets/menu.css';
And it should correctly apply the styles.