css 如何将自定义样式仅应用于一个Astro版面及其所有子版面？

snvhrwxg 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(128)

这是我第一次使用Astro（一般来说，还有组件），由于封装的原因，应用样式正在把我引向死胡同。
我想要的是设计某个布局（例如，博客部分）及其所有子布局的样式，使其与站点的其他部分具有不同的样式。样式必须在博客内部保持一致：标题，文本，颜色，链接样式等，代码必须是干的。
按照我没有经验的逻辑，如果我在blogLayout.astro中编写样式，它们应该被postLayout.astro、categoryLayout.astro和blogContactLayout.astro继承。
我尝试了两种可行的解决方案：

将外部.css文件放在blogLayout.astro主体的中间。
编写全局样式并为blog创建许多类，但是docs建议使用组件样式，而不是全局样式。

我想知道在这个组件时代是如何做到的。

css

来源：https://stackoverflow.com/questions/74782779/how-can-i-apply-custom-styles-to-only-one-astro-layout-and-all-its-child-layouts

1条答案

按热度按时间

67up9zun1#

可以像在普通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

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何将自定义样式仅应用于一个Astro版面及其所有子版面？

1条答案

相关问题

热门标签

最新问答