Polaris React styles not applied in Microsoft Clarity session recordings (Remix embedded app)

Polaris
1

I have created a Shopify embedded app using the Remix template.
In this app, I am using a combination of Polaris React and Polaris Web Components.

I have also integrated Microsoft Clarity for session recording and analytics.

Issue:
In Microsoft Clarity session recordings, the Polaris React component styles are not applied. The UI appears broken or unstyled in the recordings.
However, when using the app normally inside the Shopify Admin, everything works and styles are applied correctly.

This issue seems to occur only in Clarity session recordings, not in the actual app behavior.

Polaris styles import:

import polarisStyles from “
/polaris/build/esm/styles.css?url”;

export const links = () => [{ rel: “stylesheet”, href: polarisStyles }];

Additional notes:

  • App is embedded inside Shopify Admin (iframe)

  • Using Remix + Polaris React + Polaris Web Components

  • No styling issues outside of session recordings

For reference, please review the attached screenshot showing how the UI appears in the Clarity recording.

Has anyone faced a similar issue with Microsoft Clarity or other session recording tools when using Polaris React in a Remix embedded app? Any guidance or workaround would be appreciated.

2

Hey @jaymit_b - thanks for flagging this, hope all’s well :slight_smile:

I think this might be a limitation with how Microsoft Clarity captures and replays session recordings rather than an issue with Polaris or your app implementation. Microsoft’s Clarity FAQ mentions that CSS needs to be externally accessible for recordings to render correctly, so I think this could potentially be what’s happening here. More details in their FAQ here as well: https://learn.microsoft.com/en-us/clarity/faq

That said, could you let me know whether the unstyled components are specifically the Polaris Web Components, the Polaris React components, or both? I can’t guarantee a solution on our end but I can absolutely pass along your feedback to the team. Hope to hear from you soon!

3

Hi @Alan_G ,

Issue with the Polaris React component only, for web components it’s working fine. As I’m using the remix template and loading Polaris React styling dynamically which is occur styling issue in session recording.

4

Hey @jaymit_b – thanks for the follow-up!

That makes sense, since the issue is isolated to Polaris React components while Polaris Web Components render correctly in Clarity, this is almost certainly a limitation with how Clarity captures CSS during session replays.

On the Polaris React side: as of October 2025, Polaris React is now in maintenance mode and no longer receiving updates. We are using the Web Components version as the unified UI toolkit going forward. Web Components work across all Shopify surfaces (Admin, Checkout, Customer Accounts) and load directly from Shopify’s CDN, which is likely why Clarity can render them properly there.

My recommendation on this would be to gradually migrate your Polaris React components to Polaris Web Components, since I can’t guarantee we’d be able to resolve the React version issue due to the deprecation. This should resolve the Clarity styling issue as a side benefit though, and will keep your app aligned with where Shopify’s design system is headed. You can use both in the same app during the transition.

Here are some resources to help:

Let me know if I can help out further though, I definitely understand it’s not super ideal, so happy to help with any other questions on this.

5

Hey @jaymit_b - let me know if the above helped, just checking in here :slight_smile: