How do I modify the styles of admin ui extensions?

Extensions
1

Initially I tried to achieve this using by adding styles directly but that didn’t workout.

So later on I tried adding id the admin-ui-extension element as some of the elements take id prop. But then I can’t add styles as I’m not being able to select the element using document then querySelector.

So I was wondering how can I add custom styles to the components.

Your help will be greatly appreciated. Thanks!

2

Hey @WakilEfoli :wave:,

Admin UI Extensions components can’t be styled through custom CSS. They’re limited to the styling available on each component, such as padding, gap, and tone. This is by design to ensure the styling of Admin UI Extensions stays consistent with the rest of the Shopify Admin.

What components in particular are you trying to add styling too?

3

One example: it would be very helpful to wrap elements in InlineStack

image
image1262×610 32.3 KB