#How should I be styling rendered <Content />?

13 messages · Page 1 of 1 (latest)

atomic latch
#

The elements produced by rendering a content collection to a <Content /> component don't have the [data-astro-randomstring] attribute, and so aren't picked up by styles specified in a <style> tag in the component.

As a result, I have to :global() everything for it to work. For example, to apply some styling to an h2.

I feel like I'm missing something. How should I be styling these components?

#

my solution is to be as specific as possible with each of these declarations. e.g. :global(article .inner-container > h2)

#

so as to not affect other h2 elements. e.g. when i render a mermaid chart, it spews elements in a deeply nested structure. i just ran in to an issue where global styling on <p> affected the rendered chart, hence this support request

#

i'm fine if this is the solution, i just wanted to be sure i'm doing it the correct way

atomic latch
#

…out doing some yard work i realise this is probably how i'd have to style stuff anyway. because if i'm saying that any p that is a child of this particular article should have color: hotpink then that'd apply whether or not i had :global() in there

#

so forgive me if i'm wasting your time here. i'm not very good at CSS. but i'll leave this here for the sanity-check 🙃

trim kayak
#

One option is to use the scope of a wrapping element:

<div class="markdown-content">
  <Content />
</div>

<style>
.markdown-content :global(*) {
  color: var(--body-color);
}
.markdown-content :global(h1) {
  font-size: var(--text-h1);
}
</style>
neon timber
trim kayak
#

Without it, each selector is scoped, e.g. .markdown-content:where([data-astro-cid-XXXX]) *:where([data-astro-cid-XXXX])
Using :global() says not to scope that part of the selector: .markdown-content:where([data-astro-cid-XXXX]) *

#

If you have a component like this:

<div class="component">
  <p>Some text</p>
  <AnotherComponentThatAlsoContainsParagraphs />
</div>
<style>
  .component p { color: red; }
</style>

Only the paragraph in this component would be red. Paragraphs in the child component don’t get the scoped style.

If the style were updated to

  .component :global(p) { color: red; }

Then all <p> children will be red, including any renderded by other components.

neon timber
#

Going back to @atomic latch's question.
I personally use a separate markdown.less stylesheet, which I import at the top of the component where you use <Content /> , which is wrapped in a div where I apply a class

<section class="markdown-content">
  <Content />
</section>

I use that class for specificity in markdown.less

.markdown-content {
    h1 {
        //
    }


    h2 {
        //
    }
}
atomic latch
#

thanks team. i went with the scoped-with-selector route and it's working well for me