4

使用 Material-UI 的 withStyle 以及下面的示例，当将颜色更改为 时blue，我在控制台上看到 HMR 正在更新模块，但更改实际上并没有出现在屏幕上，我必须重新加载页面。

如果我style向 div 添加一个属性并将颜色设置为blue那里，它会正确显示在屏幕上。

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);

我想我没有完全理解这withStyles件事，我的猜测是配置错误，所以这是我的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'],
  },
};
4

0 回答 0