Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[question] With each click on the mui components, several duplicate style tags are added to the head #10163

Closed
2 tasks done
srbadni opened this issue Aug 28, 2023 · 5 comments
Closed
2 tasks done

[question] With each click on the mui components, several duplicate style tags are added to the head #10163

srbadni opened this issue Aug 28, 2023 · 5 comments
Labels
component: pickers This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: question Community support but can be turned into an improvement

Comments

@srbadni
Copy link

srbadni commented Aug 28, 2023 •
edited
Loading

Order ID or Support key 💳 (optional)

59340

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

The problem in depth 🔍

Screenshot 2023-08-28 131252

as you can see, When some mui components are clicked, several style tags are appended to the head tag, and over time, we come across perhaps close to 100 style tags that are often duplicated, I mean, no matter what I scroll, they don't finish!

Your environment 🌎

`npx @mui/envinfo` 
    chrome browser.
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (116.0.1938.62)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.8
    @emotion/styled: ^11.10.6 => 11.10.8
    @mui/base:  5.0.0-alpha.127
    @mui/core-downloads-tracker:  5.12.2
    @mui/icons-material: ^5.11.11 => 5.11.16
    @mui/lab: ^5.0.0-alpha.121 => 5.0.0-alpha.128
    @mui/material: ^5.11.11 => 5.12.2
    @mui/private-theming:  5.12.0
    @mui/styled-engine:  5.12.0
    @mui/styles: ^5.11.11 => 5.12.0
    @mui/system:  5.12.1
    @mui/types:  7.2.4
    @mui/utils:  5.12.0
    @mui/x-date-pickers: ^6.0.0 => 6.3.0
    @mui/x-date-pickers-pro: ^5.0.20 => 5.0.20
    @mui/x-license-pro: ^5.17.12 => 5.17.12
    @types/react: 18.0.28 => 18.0.28
    react: ^18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 4.9.5 => 4.9.5
@srbadni srbadni added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: commercial Support request from paid users labels Aug 28, 2023
@zannager zannager added support: question Community support but can be turned into an improvement component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user labels Aug 29, 2023
@MBilalShafi
Copy link
Member

Could you mention which component you are facing the issue in? I tried Data Range pickers and it appears to be working normally.

It'd be great if you provide a minimal reproduction test case with the latest version of the libraries. This would help identify the issue better. 👷
A live example would be perfect. This codesandbox.io template may be a good starting point.

Thank you!

@MBilalShafi MBilalShafi added status: waiting for author Issue with insufficient information component: pickers This is the name of the generic UI component, not the React module! and removed component: data grid This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 29, 2023
@LukasTy
Copy link
Member

LukasTy commented Aug 30, 2023

I can confirm that the component seems to work as expected, it lazily loads the required styles when necessary.
The DateRangeCalendar styles are loaded when the picker view is opened and transition styles are loaded when the first month change happens. After that, I can not detect any new style additions.

@srbadni
Copy link
Author

srbadni commented Sep 3, 2023

@LukasTy thanks for Clarify the situation, I thought there was a fault in my code that caused this behavior, but now I understand that this is the best possible thing (lazy loading).
But there is another problem besides this, and that is that because I used "icons-material" components throughout the project, I see a lot of style tags with the same title as i4bv87-MuiSvgIcon-root in the <head> tag. As soon as you delete these components in the project, these tags will disappear.

giffffffffsad

My ideal is to continue using these icons-material components, but create only one Style tag, not all the same tags.

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Sep 3, 2023
@LukasTy
Copy link
Member

LukasTy commented Sep 4, 2023

@srbadni Thank you for providing a video showcasing the issue and specifying the exact pain point.
The behavior you've shown is clearly not ideal, but I was unable to reproduce it.

Could you please provide a minimal reproduction example, where such behavior would be seen?
I've tried adding two different icons from @mui/icons-material as slots on the DateRangePicker, but can only see a single style element for the MuiSvgIcon. 🤷

@LukasTy LukasTy added the status: waiting for author Issue with insufficient information label Sep 4, 2023
@github-actions
Copy link

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: pickers This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user status: waiting for author Issue with insufficient information support: commercial Support request from paid users support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@LukasTy @MBilalShafi @srbadni @zannager