React工具箱无法正常工作？ （AppBar造型和波纹）

Question

我刚刚加入了AppBar

<AppBar
    leftIcon="menu"
    onLeftIconClick={this.toggleDrawerActive}>
</AppBar>

它看起来像：

请注意，菜单图标是关闭而黑色而不是白色？

当我点击图标/按钮时，纹波停留在最后

我的设置可能有问题，但是什么？

我想知道使用CSS模块搞砸了吗？我的webpack.config.js以下。如果您需要更多信息，请告诉我。的 Github repo at commit

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

const context = path.resolve(__dirname, "src")

module.exports = {
  context,
  entry: "./js/index.js",
  output: {
    path: path.resolve(__dirname, "build/js"),
    filename: "index.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: "babel-loader",
        options: {
          plugins: [
            [
              "react-css-modules",
              {
                context
              }
            ]
          ]
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
              sourceMap: true
            }
          }
        })
      },
      {
        test: /\.s(a|c)ss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
      filename: "index.html",
      inject: "body"
    }),
    new ExtractTextPlugin("css/app.css")
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "src"),
    historyApiFallback: true
  },
  devtool: "source-map"
}

Answer 1

好的，我发现答案从https://github.com/react-toolbox/react-toolbox-example开始，并在其webpack配置中注释掉了内容。复制这个问题的是postcss。我将它包含在我的项目中并且有效。

  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: [
        {
          loader: "css-loader",
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
            sourceMap: true
          }
        },
        'postcss-loader' // this is required
      ]
    })
  }

同时添加postcss.config.js

module.exports = {
plugins: {
    'postcss-import': {
    root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {}
},
};