#HTML in markdown file, but classes aren't styled

4 messages · Page 1 of 1 (latest)

primal dawn
#

When I'm using HTML like this '<h1 class="cs-title">Werkt u en uw team <span class="cs-color">veilig en effectief?</span></h1>' directly in my layout, the class 'cs-title" is styled with the css. When I use the same html in a Markdown file, and I render the content in the layout using the <slot/ > the cs-title class isn't styles.

When I inspect the source of the two versions in my browser, the html in the layout versions render to this '<span class="cs-color" data-astro-cid-d6p3sf2v="">veilig en effectief?</span>' , and the css rule is this: #content-page-1401[data-astro-cid-d6p3sf2v] .cs-color[data-astro-cid-d6p3sf2v]

How can I use html with classes in my markdown, render it via a <slot /> and apply the css styling ?

supple sparrowBOT
#

Hi @primal dawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Your Markdown HTML is not picking up the styles because of Astro’s scoped styles and how they are applied to slotted Markdown content.

In your layout, styles like:

<style>
  #content-page-1401 .cs-color { … }
</style>

are compiled to something like:

#content-page-1401[data-astro-cid-XXXX] .cs-color[data-astro-cid-XXXX] { … }

and only apply to elements that have the same data-astro-cid-XXXX attribute. Elements coming from Markdown and rendered into <slot /> do not get that attribute, so the scoped selector no longer matches. [Styling in Astro]

You have two main options:

1. Make the styles global in the layout

Use is:global so the CSS is not scoped and will match the Markdown HTML:

<style is:global>
  #content-page-1401 .cs-title {
    /* your styles */
  }

  #content-page-1401 .cs-color {
    /* your styles */
  }
</style>

Global styles are recommended for styling Markdown content from a layout. [Markdown Styling]

2. Use a wrapper + :global() for children

Keep the layout styles scoped, but explicitly target the slotted Markdown via :global():

<!-- Layout.astro -->
---
const { frontmatter } = Astro.props;
---

<div id="content-page-1401">
  <slot />
</div>

<style>
  /* Scoped to this component, but applies globally to children */
  #content-page-1401 :global(.cs-title) {
    /* your styles */
  }

  #content-page-1401 :global(.cs-color) {
    /* your styles */
  }
</style>

This pattern (scoped parent + :global() for children) is specifically recommended for styling content like blog posts or Markdown. [Styling in Astro]

#

Either approach will let HTML with class="cs-title" / class="cs-color" inside your Markdown, rendered via <slot />, be styled correctly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: