How to use material-ui and injectTapEventPlugin with gatsby - reactjs

Question

I got this error when I wrote AppBar tag from material-ui into a code generated by gatsby new.
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element.
To avoid this, I wrote these code at the top of root template (_template.jsx) file.
import injectTapEventPlugin from 'react-tap-event-plugin';
try { // to prevent error because of loading twice
injectTapEventPlugin();
}
catch(e) {
console.warn( e );
}
This works perfectly with HMR, but it's ugly.
What is the correct way to resolve this problem?
UPDATE: To clarify - gatsby new clones gatsby-starter-default, and there are only React components.
Also, to import and write injectTapEventPlugin at the top of /html.js raises an error Warning: Unknown prop onTouchTap on <button> tag. It means injectTapEventPlugin() is not called properly.

Answer 1

You only need to import and add injectTapEventPlugin in your top level component from where you are rendering into your html element
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Answer 2

You could put that code in html.js and it'll work everywhere
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { prefixLink } from 'gatsby-helpers'
import { TypographyStyle } from 'react-typography'
import typography from './utils/typography'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const BUILD_TIME = new Date().getTime()
export default class HTML extends React.Component {
...
You can take a look at this issue in gatsby repo on GitHub which also suggests that you put it in html.js