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:
Passing prop like this
<CartContent className={"cart-overlay"} />
grabbing class in container like this:
<div className={`cart-element ${className === "cart-overlay" && "cart-overlay"}`}>
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
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.