寻找 smui 拆分按钮的工作示例答案

【问题标题】：Looking for a working example of smui split button寻找 smui 拆分按钮的工作示例
【发布时间】：2022-11-07 15:35:42
【问题描述】：

我在这里关注示例 SMUI： https://sveltematerialui.com/demo/button/

我写了这个组件（UserDropdown）：

<script>
    import Button, { Group, GroupItem, Icon } from '@smui/button';
    import Menu from '@smui/menu';
    import List, { Item, Separator, Text } from '@smui/list';

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

{#if user && user.hasOwnProperty('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}

尽管代码几乎是从 SMUI 网站逐字记录的，但它不起作用。我收到此错误：

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)

有没有人有一个适用于 7.0 beta 1 的 SMUI 拆分按钮的工作示例？

谢谢

【问题讨论】：

如果将此代码粘贴到the REPL 中，它就可以正常工作。首先尝试创建一个可重现的示例。堆栈跟踪提到了CommonIcon.svelte，它不是代码的一部分。
完全正确 - 这不是我的组件之一，可能是 smui 框架的一部分。但是我找不到任何对我有意义的文档。
看起来问题是这样的：github.com/hperrin/svelte-material-ui/issues/524

标签： svelte svelte-material-ui

【解决方案1】：

我遇到过同样的问题。当我检查时，我的 package.json 中没有 @smui/button

做就是了

npm i @smui/button

它应该工作

【讨论】：

这不是问题 - 按钮已安装

【解决方案2】：

我在使用 DataTable 时遇到了同样的问题，并通过从 @smui/data-table 而不是 @smui/common 导入标签来修复它。他们最终指向同一个文件，所以我真的不明白错误的原因，但它确实解决了它。

【讨论】：