javascript - 反应工具箱不起作用？（AppBar 样式和波纹）

Question

我刚刚包括AppBar了

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

它看起来像：

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

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

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

我想知道使用 CSS 模块是否会搞砸？我的webpack.config.js下面。如果您需要更多信息，请告诉我。提交时的 Github 存储库

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': {}
},
};