Sveltestrap模态框头部渲染异常求助（Svelte入门开发者）

问题原因 #

你错误地将header作为普通属性传递给Modal组件，Sveltestrap的Modal并不支持通过header属性直接设置头部内容，这个属性被组件识别为函数类型的值，所以渲染出了那段奇怪的代码。同时你使用的body属性也不符合组件的用法规范。

修正后的代码 #

<script lang="ts">
    import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "@sveltestrap/sveltestrap";
    
    let {open = $bindable()}:{
        open: boolean
    } = $props();
    const toggle = () => (open = !open);
</script>

<Modal isOpen={open} {toggle}>
    <ModalHeader>Demo Modal</ModalHeader>
    <ModalBody>
        <!-- 在这里添加模态框的主体内容 -->
    </ModalBody>
    <ModalFooter>
        <Button color="primary" on:click={toggle}>Hinzufügen</Button>
        <Button color="secondary" on:click={toggle}>Abbrechen</Button>
    </ModalFooter>
</Modal>

关键说明 #

Sveltestrap的Modal组件是通过专用子组件（ModalHeader、ModalBody、ModalFooter）来划分结构的，这些子组件会自动对应到Modal的内置插槽位置，而非通过props传递内容。你需要用这些组件分别包裹模态框的头部、主体和底部内容，才能正确渲染。

如果你的项目使用的是较新版本的Sveltestrap，确保组件导入和用法与官方文档一致，版本适配问题也可能导致这类渲染异常。

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