Embedded Shopify app styling not applying correctly (Polaris + Remix) - newbie question

Polaris
1

Hi everyone :waving_hand:

I’m new to Shopify app development and currently building my first embedded Shopify admin app. I’m hoping to sanity-check whether I’m missing something obvious around styling.

Setup / stack

  • Shopify CLI (latest)

  • Embedded admin app

  • Remix / React Router (Shopify’s recommended template)

  • Polaris components

  • AppProvider wrapped in app/root.jsx

  • Polaris CSS imported (@shopify/polaris/build/esm/styles.css)

The issue
The app renders fine functionally, but Polaris styling does not apply visually:

  • Layout looks like plain HTML

  • Text, Cards, spacing, headings don’t look like Shopify UI

  • No Polaris “feel” at all - everything renders as a long document

I am using Polaris components (Page, Card, Text, TextField, BlockStack, etc.), and there are no runtime errors.

What I’ve tried

  • Confirmed AppProvider is wrapping <Outlet />

  • Confirmed Polaris CSS import exists

  • Restarted shopify app dev

  • Cleared dev preview

  • Tested via admin embed (admin.shopify.com → Apps → app)

  • Tested multiple refreshes / tunnels

Current state
To keep moving, I’ve temporarily reverted to a very basic layout (no polish), but I’d really like to understand:

  • whether this is expected behavior in dev

  • or whether I’m previewing the app incorrectly

  • or if I’ve misunderstood how Polaris styles are applied in embedded apps

I’m very much a newbie here, so apologies if this is a basic mistake - but I’ve been stuck longer than I’d expect for something that feels fundamental.

Any pointers, confirmations, or “you’re doing it wrong - do this instead” would be hugely appreciated :folded_hands:

Thanks in advance!

2

I think I fixed it!

Once I stopped bypassing the embedded context and rendered everything properly inside Polaris <Page> with AppProvider (and Polaris CSS), the styles immediately started working.