Mui components generating too much style tags #30892
Comments
darman96
added
the
status: waiting for maintainer
michaldudak
added
bug 🐛
|
@darman96 could you provide two examples (v4 vs v5) where it is visible that there are perf regressions? Dynamic styles should be way faster with v5, this was one of the main reasons why we moved to emotion (vs JSS used in v4). I can't see notable perf issues on the Codesandbox that you've shared.
Actually, emotion merged all styles under one class name. The other classes that you see exist so that people can target those and add overrides, they do not contain any styles associated with them. In addition, as far as I can see the classes are re-used, for example
|
mnajdova
added
status: waiting for author
|
I'll try to prepare some examples later today if I got time. |
|
Hi, we've started using MUI System on the project after migrating from v4 to v5 and have faced the same issue with many style tags included. In general, one style tag includes only one CSS selector.
@mnajdova If there's some way how to combine styles please let us know. |
|
Also face that issue on early stage of the project. Any idea how to reduce it? |
|
Sorry for the delay, I have a new example Sandbox. Edit: We changed our TableCells to only render an input field while they are interacted with as a fix. Edit 2: Almost forgot. The performance issue is noticable when skipping through pages of the Tables. |
|
Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed. |
|
@michaldudak @mnajdova Please reopen the ticket since it's not resolved. |
|
Looks like the issue is related to #28070 (comment) (rendering menu inputs causes generating manu global styles). For allowing developers to improve perf for scenarios like this, this PR #29213 introduced a new prop for disabling the automatic generation of global styles, you just need to make sure to add the global styles once in the top of your application. You can follow the instructions in the PR. Let me know if this solves your issue. |
|
|
|
Has anyone checked #30892 (comment) and the PR linked to it? Posting new screenshots is not helping anyone. |
|
I have also ran into this issue in a similar case, in a form containing many textfield components. I am also seeing a significant performance degradation when migrating from v4 to v5 in situations where I am rendering ~180 textfield components in a large form. In my case, rendering 180 textfield components generated over 3000 <style> tags! Switching between tabs in my app, each of which contained up to 180 textfields was where I saw the worst performance. I tried to disable the global injection of styles which I saw earlier in this thread but that did nothing to solve my issue, because the out of the box textfield component generates a huge number of <style> tags by itself. I styled my textfield components with the sx prop and the styled api and chose not to use the theme styleOverrides as in my opinion they are not as easy to read for someone not familiar with MUI. If anyone knows how to solve this problem please let me know! |
|
@bcattonsimply would be great if you can share a codesandbox with a similar reproduction to what you have in your app. It would help us debug the issue. |
|
Has anyone solved this issue yet? |
|
This is not about TextField only |
|
For my project, I thought I had this issue too, but it was only in development and does not show up in production FYI. |
|
any update about this issue? |
|
I am facing same problem too. My current project looks like this (production)
|
How? This problem also appears in my production. Can i see your next.config or any settings file? |
|
Same here Facing the same issue in Developement and Production env.
|
I solved this problem. If you using Nextjs, here is the solution link. |
Duplicates
Latest version
Current behavior 😯
Since migrating to Material-UI 5 Some MUI Components (especially Inputs) are generating a huge amount of style tags inside the html head which heavily impacts the performance of our app. It seems that those styles are duplicated for every instance of that component.
Also, I don't see why styles of one component have to be in multiple style tags instead of being grouped into one.
Expected behavior 🤔
Grouping styles in one style tag and reusing classes for multiple component instances.
Steps to reproduce 🕹
I prepared a CodeSandbox example.
If you look at the page source you can see the style tags inside
<head>increase proportional with the amount of list items.Context 🔦
Just to clarify our situation, we are currently developing a web app which displays a lot of data inside a table.
So far we used Mui4 and just fixed a performance issue where using dynamic styles inside our table cells lead to 100s of styles being generated. After switching to static styles performance improved greatly but since I migrated to Mui5 it's just as bad as before with dynamic styles.
Your environment 🌎
See CodeSandbox
The text was updated successfully, but these errors were encountered: