<p dir="auto">I've been trying to dynamically check and uncheck the Table Header checkbox through another component, and have been unable to do so.</p>
<p dir="auto">While exploring this issue further I found that in the TableHeader component setting selectAllSelected to true doesn't seem to be passed on. I've added dummy props to my table header just to verify I was looking at the right information, and console.logged the props in willMount and render. The selectAllSelected seems to default to false.</p>
<p dir="auto">The current Next.js example is quite daunting with several files and concepts thrown in. I will apologize in advance because the following may seem like a bit of a rant, but I really want to improve these examples.</p>
<h2 dir="auto">Things I found confusing</h2>
<p dir="auto">The whole example looks more like someone's personal boilerplate for their production app rather than an example for people to learn the API and get productive quickly.</p>
<p dir="auto">Here are some of the things that are confusing to me:</p>
<ul dir="auto">
<li>What does <code class="notranslate">getContext.js</code> do and why is it in a <code class="notranslate">/styles</code> folder?</li>
<li>What does "context" mean in this instance?</li>
<li><code class="notranslate">withRoot.js</code> is a bit confusing, why is there mutation here? Is it only for the sake of adding a <code class="notranslate">displayName</code>?
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let AppWrapper = props =&gt; props.children;
AppWrapper = withStyles(styles)(AppWrapper);"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-v">AppWrapper</span> <span class="pl-c1">=</span> <span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">children</span><span class="pl-kos">;</span>
<span class="pl-v">AppWrapper</span> <span class="pl-c1">=</span> <span class="pl-en">withStyles</span><span class="pl-kos">(</span><span class="pl-s1">styles</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-v">AppWrapper</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
<li>Is it possible to use Material-UI without using so many HOCs? What about a render-prop pattern instead? There's a lot of in-direction here that I suspect may not be completely required.</li>
</ul>
<h2 dir="auto">JSS confusion</h2>
<p dir="auto">On top of that, there's the JSS barrier to entry:</p>
<ul dir="auto">
<li>Why is JSS necessary for this example? I can guess that it has something to do with server-side rendering, but it's not made clear how it's working. There are many moving parts here.</li>
<li><code class="notranslate">jss</code>, <code class="notranslate">react-jss</code>, <code class="notranslate">jss-preset-default</code> are all dependencies mentioned in the code but do not exist inside <code class="notranslate">package.json</code>.</li>
<li>You have to learn about <code class="notranslate">sheetsManager</code>, <code class="notranslate">sheetsRegistry</code>, and a lot of other jargon that many React devs may not be immediately familiar with.</li>
</ul>
<p dir="auto">Having to learn how to work with three new dependencies in addition to your UI library is not exactly the easiest way to get started if all I want is a simple colored button.</p>
<h2 dir="auto">Concepts unrelated to Material-UI</h2>
<p dir="auto">There are also random things thrown in that are not directly related to Material-UI, here are a couple examples:</p>
<ul dir="auto">
<li>custom meta tag with the hint: "Use minimum-scale=1 to enable GPU rasterization"</li>
<li>PWA stuff (<code class="notranslate">manifest.json</code> + setting the PWA color for icons)</li>
</ul>
<h2 dir="auto">Conclusion</h2>
<p dir="auto">I know it's probably a little too late to change the API for the 1.0 release, but we can do our best to make it easier for people to learn. I mean, all I honestly wanted to do was to use Next.js with Material-UI and have a custom color. It shouldn't require learning all of the things above.</p>
<p dir="auto">There are a few things we can do:</p>
<ol dir="auto">
<li>Separate the example into several separate examples show-casing each individual feature.</li>
<li>Thoroughly document and explain the example in a separate README or blog post.</li>
<li>Simplify the API so that usage is also likewise simplified.</li>
<li>Offer higher level abstractions/helper functions (they might be less powerful, but they will be easier for users to get started)</li>
</ol>