1

This is the first time I use Astro (and components, in general), and applying styles is leading me to a dead end because of encapsulation.

What I want is to style certain layout (for example, a blog section) and all of its sub-layouts with a different style from the rest of the site. Style must be consistent inside the blog: headers, text, colors, links styles, etc., and code must be DRY.

In my unexperienced logic, if I write styles in blogLayout.astro, they should be inherited by postLayout.astro, categoryLayout.astro and blogContactLayout.astro. But they don't.

I tried two working solutions:

  • Dropping and external .css file in the middle of the body of blogLayout.astro.

  • Write global styles and create a lot of classes just for the blog, but the docs recommendation is to use component styles, not globals.

I would like to know how it is done in this components age.

Nacho B
  • 1,573
  • 1
  • 12
  • 16

1 Answers1

0

It is possible to scope child components with Astro like in normal css, the trick is, as Astro excludes the child components from current one, it filters the css instruction out, to prevent that, it is possible to inline such css instructions.

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

here a link to a full working example https://github.com/MicroWebStacks/astro-big-doc/blob/5cbcf7e50a04be3f889002249e401a4f6dcbf2ff/src/layout/Layout.astro#L202

wassfila
  • 1,173
  • 8
  • 18