Styling components from parent | Astro Lounge | Page 1

native marsh Jun 13, 2023, 9:04 PM

#

Hey, I'm trying to style components from the parent. I did a quick search in the discord and found the :global selector.

It works, but is that really the only way to go about it? It's not a bad solution it just seems a bit unintuitive to me. Maybe someone can help explain why it's happening like this.

Here's the code:

<section id="cta">
  <!-- MaxWidthContainer is just a section with a slot -->
  <MaxWidthContainer>
    <h2>Check out my Etsy</h2>
    <a href="/">Etsy Shop</a>
  </MaxWidthContainer>
</section>

section {
    margin: t.$m-section;

    :global(.max-width) {
      background-color: t.$clr-brand-muted;
      padding: 4rem 1rem;
      text-align: center;

      @media (min-width: t.$bp-tablet) {
        padding: 4rem;
      }
    }
  }

gentle spireBOT Jun 13, 2023, 10:15 PM

#

Quiet in here?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

fathom wind Jun 14, 2023, 5:47 AM

#

Styles are scoped. Astro adds a unique class to the component that's being styled. What is your intended goal? Why does it need to be styled from the parent?

native marsh Jun 14, 2023, 8:23 AM

#

fathom wind Styles are scoped. Astro adds a unique class to the component that's being styl...

I want to style it from the parent because I want to use the component in other components and have different styling when it's in this specific component. I don't want to add unneeded complexity by making variants when all I need is a couple lines of css. I'd much rather keep the component generalized and then add some css to the component from the parent when needed. Does that make sense?

fathom wind Jun 14, 2023, 10:36 PM

#

You can create a custom css stylesheet or custom props/selectors? Anything with that type of styling can live there and just import them as you need them?

native marsh Jun 14, 2023, 11:43 PM

#

fathom wind You can create a custom css stylesheet or custom props/selectors? Anything with ...

Would you mind explaining what you mean by the latter? Sorry I'm really new to Astro. Do you mean just passing a variant prop to my MaxWidthContainer component and having the styling inside the component itself? If that's what you mean then that's not a solution I'd really like to go for honestly but I appreciate any insights 🙂

fathom wind Jun 15, 2023, 12:02 AM

#

What I'm suggesting is basically the same thing as using global selector. I was just suggesting ideas. Personally I use css custom selectors or custom properties for utils and etc. that live in their own styles.css file then when I want to use them I import them into the component as needed. PostCSS helps a lot with this though.

#Styling components from parent