使子/嵌套布局不继承父布局

Question

我想child仅使用子布局渲染路线，而不继承根布局。

/routes/+layout.svelte
/routes/child/+layout.svelte
/routes/child/+page.svelte

我试图child/+layout@.svelte打破继承，但没有成功。我不想在父布局中使用布局组或 if-else 语句。

是否可以选择以优雅的方式打破父级继承？

Answer 1

这当然可以通过一些 CSS 技巧来实现。请参阅以下帖子以获得良好的解决方案：Is there a way to make a child DIV's width width more lower than theparent DIV using CSS? 。

最简单的解决方案是放入+layout.svelte包含以下内容的文件：

<main>
  <slot />
</main>

<style>
  main {
    height: 100vh;
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
  }
</style>

这也可以使用 svelte 组件当前上下文中的任何容器来完成。