Updating Meta Tag in GatsbyJS

Question

I want to use Material-UI with Gatsby. On the usage page, it says I have to add the following responsive meta tag:

<meta
  name="viewport"
  content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>

Now, if I take a look at the meta tags that Gatsby starts off with, they are almost the same:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

So basically,, the only difference is that material-ui wants me to add minimum-scale=1.

My question is how can I update or replacethe meta viewport tag to include this value. I tried using react-helmelt in my base layout as follows:

<Helmet>
  <meta 
    name='viewport'
    content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no'
  />
</Helmet>

But what that does is give me two meta viewport tags -- the one that Gatsby starts out with and the one that I added via Helmet:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no' />

What I want is just one meta viewport tag -- the one that includes minimum-scale=1.

Any ideas on how to do this?

Thanks.

Answer 1

If you really need the viewport meta changed you will need to override the default html template Gatsby uses. Just copy .cache/default-html.js to src/html.js and customize it to your liking.

As a side note, I really doubt there will be any problem using Gatsby's default viewport meta with Material-UI.