Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Mui components generating too much style tags
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the 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
Issue Analytics
- State:
- Created 2 years ago
- Reactions:8
- Comments:12 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.
Has anyone checked https://github.com/mui/material-ui/issues/30892#issuecomment-1056880350 and the PR linked to it? Posting new screenshots is not helping anyone.