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
One option is to use the scope of a wrapping element:
```html
<div class="markdo...
Out of curiosity, what does the :global do here when we’re using the .markdown-content class for specificity ?
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
If you have a component like this:
```html
<div class="component">
<p>Some tex...
Very clear, thanks!
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 {
//
}
}
thanks team. i went with the scoped-with-selector route and it's working well for me