如何將自定義樣式僅應用於一個 Astro 布局及其所有子布局？

Question

這是我第一次使用 Astro（通常是組件），由於封裝，應用樣式將我引向死胡同。

我想要的是為特定布局（例如，博客部分）及其所有子布局設置與網站其余部分不同的樣式。 博客內部風格必須一致：標題、文本、顏色、鏈接樣式等，代碼必須是 DRY。

以我新手的邏輯，如果我在blogLayout.astro中寫樣式，它們應該被postLayout.astro、categoryLayout.astro和blogContactLayout.astro繼承。 但他們沒有。

我嘗試了兩種可行的解決方案：

• 將 external.css 文件放在 blogLayout.astro 的正文中間。

• 編寫全局樣式並為博客創建很多類，但文檔建議使用組件樣式，而不是全局樣式。

我想知道在這個組件時代它是如何完成的。

Answer 1

可以像在普通 css 中一樣使用 Astro 限定子組件的范圍，訣竅是，當 Astro 從當前組件中排除子組件時，它會過濾掉 css 指令，為了防止這種情況，可以內聯這樣的 css 指令。

<style is:inline>
    .article-slot * > a{
            color:#3794FF;
    }
</style>

這里有一個完整工作示例的鏈接https://github.com/MicroWebStacks/astro-big-doc/blob/5cbcf7e50a04be3f889002249e401a4f6dcbf2ff/src/layout/Layout.astro#L202