求适用于SMUI 7.0 Beta 1的可运行拆分按钮（Split Button）示例

问题重现 #

参考SMUI按钮示例编写的UserDropdown组件运行时抛出以下错误：

Cannot read properties of null (reading 'SmuiElement')
TypeError: Cannot read properties of null (reading 'SmuiElement')
    at CommonIcon.svelte:32:23
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)
    at Object.default (/src/lib/components/UserDropdown.svelte:43:96)
    at Object.default (/node_modules/@smui/button/dist/Button.svelte:195:34)
    at eval (/node_modules/@smui/common/dist/SmuiElement.svelte:62:40)
    at eval (/node_modules/@smui/common/dist/SmuiElement.svelte:63:7)
    at SmuiElement.svelte:11:10
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)
    at Button.svelte:2:17
    at Object.$$render (/node_modules/svelte/internal/index.mjs:1771:22)

错误根源是SMUI 7.0 Beta版本中，Icon组件的导入路径发生变化，原代码从@smui/button导入的Icon不再兼容，导致组件初始化时出现null引用。

修复后的可运行代码 #

<script>
    import Button, { Group, GroupItem } from '@smui/button';
    import Menu from '@smui/menu';
    import List, { Item, Text } from '@smui/list';
    // 关键修改：从@smui/icon单独导入Icon组件
    import Icon from '@smui/icon';

    let menu;
    export let user;
    export let onLogout;
</script>

{#if user?.username}
    <Group variant="outlined">
        <Button variant="outlined">
            Logged in as: { user.username }
        </Button>
        <div use:GroupItem>
            <Button 
                on:click={() => menu?.setOpen(true)} 
                variant="raised" 
                style="padding: 0; min-width: 36px;"
            >
                <Icon class="material-icons" style="margin: 0;">arrow_drop_down</Icon>
            </Button>
            <Menu bind:this={menu} anchorCorner="TOP_LEFT">
                <List>
                    <Item on:SMUI:action={onLogout}>
                        <Text>Logout</Text>
                    </Item>
                </List>
            </Menu>
        </div>
    </Group>
{:else}
    <div>
        <a href="/login">LOGIN</a>
    </div>
{/if}

关键修改说明 #

• Icon组件导入：SMUI 7.0 Beta将Icon组件移至独立的@smui/icon包，需单独导入，不再从@smui/button导出
• 可选链操作符：调用menu.setOpen(true)时使用menu?.setOpen(true)，避免menu未初始化时的null报错
• 简化用户判断：用user?.username替代原有的user && user.hasOwnProperty('username')，代码更简洁安全

内容的提问来源于stack exchange，提问作者user20232084