civic pumice
I have my posts in the following manner:
<!-- src/pages/posts/[id].astro -->
---
// some code, some getStaticPath
const item: Post = Astro.props.post;
---
<PostLayout>
<div>
<Pills list={item.frontmatter.tags} />
<HeadTag post={item} />
</div>
<main>
<item.Content />
</main>
</PostLayout>
<style type="sass">
// when I use the different styles here, under main, they get scoped.
// when I add the is:global tag, they don't get the access to the CSS properties.
</style>
Or, is there a way to opt out of astro's css scoping by importing css? If I can, how do I import scss?
outer zodiac
I have my posts in the following manner:
```html
<!-- src/pages/posts/[id].astro...
Components that are used in the same file as a scoped style tag are passed the scoped class in props, you can access it like Astro.props.class.
If you want to import scss you can do this https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet
civic pumice
Components that are used in the same file as a scoped style tag are passed the s...
Components that are used in the same file as a scoped style tag are passed the scoped class in props, you can access it like
Astro.props.class.
could you please gimme an example of what you meant? I wasn't able to understand it, unfortunately
outer zodiac
> Components that are used in the same file as a scoped style tag are passed the...
<Layout>
<Component />
</Layout>
<style>
h1 {
color:red
}
<style>
Since `<Component>` is defined inside of a file with a scoped style tag it has access to the scoped class inside of its props (`Astro.props.class`) something like `astro-HHNQFKH6` (`astro-XXXXXXXX`)
civic pumice
Here's the issue that I have, the <MarkdownPage.Content> is that from the markdown file, and I want to style that. It's not being created as a file, so I wasn't sure how to style it.
I can import a markdown.sass file though, and that solves it I guess. Thanks a lot for the time and effort, I'm really glad :)