[pickers] Date Picker style lost in prod env when loading SEEK API script

[uito-s]

Steps to reproduce

The project is not public so I can't put link here, but those are the steps:

1. put MUI datepicker into the react page
2. use nextjs to build the project
3. load https://integration.seek.com/panels/SeekApi.js script in order to use seek functions
4. build project again

Current behavior

I am using MUI X for more than 1 year and recently I found that as long as I use the default Date Range Picker with some of my external script loaded, its popup date picker style gets lost, while it only happens in prod env, I’ve double checked the issue, it never happens in dev env, it never happens if I remove the external script in prod env(which is says, dev env always work)
Here is the datepicker with external script loaded in dev env, everything works:

Here is the date picker with external seek api script loaded in prod env, style get lost:

Here is the date picker without external script loaded in prod env, everything works fine:

Expected behavior

The date picker style and its modal style never lost no matter which env its running

Context

No response

Your environment

No response

Search keywords: style lost
Order ID: 86023

[LukasTy]

Hey @uito-s
It looks like an issue on the Seek side.
It looks like they are doing too much magic with styles which could be interacting negatively with the @emotion that is used on our end. 🙈
I haven't found their source code which is built into SeekApi as I'm not sure where it resides, but it looks like they are using https://vanilla-extract.style/

Would it be possible for you to put the Seek code in a Shadow DOM to avoid leaking its buggy behavior to the overall DOM? 🤔
Otherwise, feel free to open an issue on their end so that they can fix this problem... 🙈

IMHO, such a solution (having a React app that uses SeekApi via CDN - which internally also bundles a version of React) does not seem optimal as your end users have to download at least 2 versions of React. 🤷
I'd argue that there has to be a way to bundle Seek in a regular frontend app with a build step or you ought to go the full manual integration route. 🙈

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.