Styling

Every public visual component accepts one class and a string style. Add a class to identify your instance, then target its stable parts. Load the base stylesheet first; see Themes for ready-made appearances.

Reach elements inside the cropper

Svelte scopes ordinary styles to the component that declares them. Library elements need :global(...), preferably below a local wrapper so the rule affects only this cropper.

<div class="avatar-editor">
	<Cropper {src}>
		<CircleStencil class="avatar-stencil" />
	</Cropper>
</div>

<style>
	.avatar-editor :global(.avatar-stencil .advanced-cropper-circle-stencil__overlay) {
		color: rgb(20 30 40 / 65%);
	}

	.avatar-editor :global(.avatar-stencil .advanced-cropper-circle-stencil__preview) {
		border: 2px solid white;
	}
</style>

Use class={['avatar-stencil', busy && 'is-busy']} for conditional classes and style="height: 400px" for inline styles. The shipped themes use selectors, Sass variables and currentColor; they do not define a public CSS-variable API.

Find the right part

State modifiers such as .advanced-cropper-rectangle-stencil--moving, --resizing and --disabled live on the stencil root. Controls have their own hover, disabled and direction modifiers. See the complete styling contract for exact names and ownership.

Overlay and crop outline

The overlay shades the outside using currentColor; change color to change the shade.

The stencil’s __preview part marks the selected area. It is separate from the standalone CropperPreview component.

Controls and nested boxes

Style handle visuals separately from their larger hit targets. Lines draw one border side; set border-left-width, border-top-width, border-right-width or border-bottom-width for the corresponding direction instead of adding borders to every side.

If an outer BoundingBox contains a cropper, a broad descendant selector also reaches the stencil’s box. Use the direct __lines and __handlers groups to select only the outer controls. The resizable-container example shows that pattern.

When markup must change, provide handler or line snippets on the stencil. Forward the snippet props so positioning, disabled state and native movement events survive:

<RectangleStencil>
	{#snippet handler(p)}
		<SimpleHandler {...p} class={[p.class, 'avatar-handle']} />
	{/snippet}
</RectangleStencil>

Use layer snippets for wrappers and backgrounds, and the custom stencil tutorial for a different interaction model.