Dialog examples only work as expected on the demo page

[IvankoB]

This example code placed in 'App.svelte' of bare TS-project displays both dialog contents (though shouldn't because 'open' var is false by default) and dialog call button

<Dialog
  bind:open
  aria-labelledby="simple-title"
  aria-describedby="simple-content"
>
  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
  <Title id="simple-title">Dialog Title</Title>
  <Content id="simple-content">Super awesome dialog body text?</Content>
  <Actions>
    <Button on:click={() => (clicked = 'No')}>
      <Label>No</Label>
    </Button>
    <Button on:click={() => (clicked = 'Yes')}>
      <Label>Yes</Label>
    </Button>
  </Actions>
</Dialog>

<Button on:click={() => (open = true)}>
  <Label>Open Dialog</Label>
</Button>

<pre class="status">Clicked: {clicked}</pre>

<script lang="ts">
  import Dialog, { Title, Content, Actions } from '@smui/dialog';
  import Button, { Label } from '@smui/button';

  let open = false;
  let clicked = 'Nothing yet.';
</script>

[jwsinner]

Did you make sure to put <link rel="stylesheet" href="/smui.css" /> in your app.html and run npm run prepare after installing the packages?

[IvankoB]

As me understang that dialogs expect a theme to be specified to work properly. Quite countrintuitive though ))

[jwsinner]

Not really. These components still rely on styling to display properly. If you don't reference the styles needed to make it function properly, it's not going to function properly.