0

I've just included AppBar like

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

And it looks like:

enter image description here

Notice the menu icon is off and black instead of white?

When I click the icon/button the ripple stays at the end

enter image description here

Theres probably something wrong with my setup but what?

I wonder if using CSS modules messed things up? My webpack.config.js below. Let me know if you need more info. 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"
}
Jiew Meng
  • 84,767
  • 185
  • 495
  • 805

1 Answers1

0

Ok I found the answer starting out with https://github.com/react-toolbox/react-toolbox-example and commenting out stuff in their webpack config. The thing that replicated the issue was postcss. I included it in my project and it works.

  {
    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
      ]
    })
  }

Also add a postcss.config.js

module.exports = {
plugins: {
    'postcss-import': {
    root: __dirname,
    },
    'postcss-mixins': {},
    'postcss-each': {},
    'postcss-cssnext': {}
},
};
Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
  • `react-toolbox` explicitly says that in [Readme - Prerequisites](https://github.com/react-toolbox/react-toolbox#prerequisites). Although the webpack example is with webpack 1, from there it's just having to look up how to configure [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) in webpack 2. – Michael Jungo Mar 22 '17 at 15:43