Add class to PrismicImage - Svelte

Developing with Prismic
9

In your example, the CSS class custom-image is applied to the PrismicImage component, but Svelte's scoped styles might not apply directly to the content inside the PrismicImage component. This is because third-party components like PrismicImage often render their own markup, and the styles from your component don't automatically cascade into the internal elements.

To resolve this, you can try one of the following approaches:

1. Use a global style override (via :global)

You can force the styles to apply globally, which will work regardless of how the third-party component renders its internal elements:

<style>
	:global(.custom-image) {
		max-width: 300px;
	}
</style>

This will make sure the custom-image class applies to any element globally, including the ones rendered by PrismicImage.

2. Target internal elements using ::deep

If you want to apply scoped styles and target elements within the PrismicImage, you can use the ::deep (or /deep/ in some versions) combinator:

<style>
	::deep(.custom-image) {
		max-width: 300px;
	}
</style>

This allows you to target elements rendered inside components like PrismicImage.

Either of these solutions should help your styles take effect. Let me know if you need more help debugging!

1 Like