[docs] Warn about using withRoot HOC more than one time per page

[oorestisime]

Based on discussions here #12649 and gatsbyjs/gatsby#2116 i think the gatsby example deserves a small warning on the usage of the withRoot HOC

[mbrookes]

"and causing styling issues"?

[oorestisime]

I provided some screenshots on the #12649 . dont know how to describe best the issues in the screenshots.

[oliviertassinari]

@oorestisime Does it mean we can't use withRoot with more than 1 page?

[oorestisime]

@oliviertassinari yes we can. there are two possibilities (i think)

• use withRoot only once on the layout component of the pages (i.e all pages use the same layout)
• use withRoot in each page but not at the layout (or any other component) (i.e pages use different layouts like index, 404 etc)

[oliviertassinari]

@oorestisime Oh ok, so people shouldn't mount two withRoot on the same page? Yes, that makes sens. It's same for all the other examples.

[oorestisime]

Yes exactly, and that was the source of the problems i was experiencing. I think all the repos i saw around using material-ui and gatsby were using withRoot with the problematic way i was using it and that's why i thought of clearing this out in the docs. Let me know if i need to rephrase or anything

[oliviertassinari]

@oorestisime Ok thanks. I think that we should be updating the Next.js README.md with the same message. It the same architecture.

[oliviertassinari]

Oh no, my bad, we have recently updated the Next.js example to use _app.js. So, it's Gatsby only.

[oliviertassinari]

@mbrookes I have tried a different wording. Feel free to modify it.