CODEWITHSUNDEEP
javascriptcssreactjs
Tomi Sadone
Tomi Sadone

Reputation: 13

Is there a css selector to take into account parent class?

I am creating a react e-commerce app where I need to use the same component for a cart, that takes the whole screen, and for a dropdown menu with the cart, that is much smaller.

What I want to do is to pass a class as prop when I'm rendering the dropdown cart, and use it in the container to then conditionally style every other element.

Code would be something like this:

And then what I want to do, and this is what I don't know how to do, in scss is something like this:

    .cart-overlay{
      &.child-of-cart-overlay{
        styles: cool;
        }
    }

How could I style that child of cart overlay, without having to grab the className in each one of the elements I want to syle and directly selecting with both classes?

media query won't work because it consider screen width and not element width, and there is something like container media query but they don't have almost any browser support today

Upvotes: 1

Views: 397

Answers (1)

Quasipickle
Quasipickle

Reputation: 4498

The CSS solution is to just redefine the styles for the elements when in the context of the overlay:

.cart-element{
   font-size:1rem;
}
.cart-button{
  padding:0.5rem 1rem;
}

.cart-overlay{
  .cart-element{
    font-size:0.8rem;
  }
  .cart-button{
    padding:0.25rem 1rem;
  }
}

This way, you don't need to apply any extra classes to the elements themselves.

Upvotes: 2

Related Questions