HMR not working with `withStyle` - reactjs

Question

Using Material-UI's withStyle,
with the example bellow, when changing the color to blue, I see on the console that HMR is doing its job updating modules but the changes don't actually appear on screen, I have to reload the page.
If I add a style property to the div and set the color to blue there, it appears properly on screen.
const styles = () => ({
root: {
color: 'black',
},
});
class Test extends React.Component {
render() {
const { classes } = this.props;
return (
<div calssName={classes.root}>
This is a test
</div>
)
}
}
const select = function (state) {
return state;
};
export default compose(
withStyles(styles),
connect(select),
)(Test);
I think I didn't totally understand this withStyles thing, my guess is a misconfiguration so here's my webpack.config.dev.js :
const Path = require('path');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: '#eval-source-map',
entry: [
'babel-polyfill',
Path.join(__dirname, '../../app/application/delegate'),
],
output: {
filename: 'bundle.js',
path: Path.join(__dirname, '../public/'),
publicPath: '/',
},
module: {
loaders: [
{
test: /\.jsx$|\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-2'],
plugins: [['react-transform', {
transforms: [{
imports: ['react'],
locals: ['module'],
transform: 'react-transform-hmr',
}],
}]],
},
},
{
test: /\.css$/,
use: ['css-hot-loader'].concat(ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader',
})),
},
{
test: /\.json$/,
loader: 'json',
},
],
},
plugins: [
new Webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
PLATFORM_ENV: JSON.stringify('web'),
},
}),
new Webpack.NoEmitOnErrorsPlugin(),
new ExtractTextPlugin('styles.css'),
],
resolve: {
extensions: ['.js', '.jsx', '.json'],
},
};