Svelte Material UI

Quick Guide

Some helpful guides for common use patterns in SMUI that are different than standard Svelte.

Targeting Classes

Because Svelte limits your CSS to only the current component, you need to use a ":global" selector to target SMUI elements.

Events and Modifiers

SMUI supports listening to all events. You can also use modifiers with the "$" syntax.

No events yet.

Try clicking and using the Enter key to activate this next button. (The click event's target is an element below the button while the key event's target is the button.)

No events yet.

Standard events can be modified, like blocking navigation on the click event of a link.

TypeScript event types can be tricky with SMUI components. This example shows you how to get them right.
Mouse Button: None yet.
Inner element props

Many SMUI components have inner elements that can take props with a prefix, like "input$" or "icon$".