<p dir="auto">This may have been filed already, but I did a quick search and couldn't find it. Please close if that's the the case.</p>
<p dir="auto">A React component's reusability as a view is highly limited without strong ties in with CSS. Currently, passing className to a component  eg <code class="notranslate">&lt;Component className='css-class' /&gt;</code> does nothing unless explicitly consumed by the the implementation of <code class="notranslate">Component</code>. This requires that each implementation to read the immutable prop (possibly use the React css addon) to append the class to the top level DOM or to explicitly set the <code class="notranslate">style</code>. As a result, this creates a lot of code duplication for components that need the flexibility to be used in multiple contexts.</p>
<p dir="auto">While, my understanding of the internals may be a bit lacking, I believe that this feature would mesh well with JSX since <code class="notranslate">className</code> and <code class="notranslate">style</code> are already protected keywords. Certainly let me know if I am missing something obvious as to why this would be a bad feature.</p>
<blockquote>
<p dir="auto">I was in the middle of using dev-tools <code class="notranslate">Profiler</code> to check what components will be re-rendered, and this error happened when I pressed the stop button of the recorder...</p>
</blockquote>
<p dir="auto">This is the reprex project links: <a href="https://github.com/web-reprex/prettier-list-different">https://github.com/web-reprex/prettier-list-different</a></p>
<hr>
<h2 dir="auto">Please do not remove the text below this line</h2>
<p dir="auto">DevTools version: 4.13.0-2a7bb41548</p>
<p dir="auto">Call stack: at updateTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20430:21)<br>
at getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20275:26)<br>
at ProfilingCache_ProfilingCache.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:20803:11)<br>
at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35651:33)<br>
at Qh (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13178:7)<br>
at Bi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:13879:7)<br>
at uk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16673:86)<br>
at tk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16193:11)<br>
at qk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16185:23)<br>
at jk (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:16169:5)</p>
<p dir="auto">Component stack: at CommitFlamegraphAutoSizer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:35634:34)<br>
at div<br>
at div<br>
at div<br>
at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:29016:3)<br>
at Profiler_Profiler (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37064:34)<br>
at ErrorBoundary_ErrorBoundary (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30336:5)<br>
at PortaledContent (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30416:5)<br>
at div<br>
at div<br>
at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:34462:3)<br>
at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25252:3)<br>
at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:25855:3)<br>
at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:30558:3)<br>
at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:37572:3)</p>