Estoy creando una aplicación de comercio electrónico de reacción en la que necesito usar el mismo componente para un carrito, que ocupa toda la pantalla, y para un menú desplegable con el carrito, que es mucho más pequeño.

Lo que quiero hacer es pasar una clase como accesorio cuando estoy representando el carrito desplegable y usarlo en el contenedor para luego diseñar condicionalmente todos los demás elementos.

El código sería algo como esto:

• Pasando prop como este

   <CartContent className={"cart-overlay"} />

• tomando clase en un contenedor como este:

   <div className={`cart-element ${className === "cart-overlay" && "cart-overlay"}`}>

Y luego lo que quiero hacer, y esto es lo que no sé hacer, en scss es algo como esto:

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

¿Cómo podría aplicarle estilo a esa superposición secundaria del carrito, sin tener que tomar el className en cada uno de los elementos que quiero diseñar y seleccionar directamente con ambas clases?

la consulta de medios no funcionará porque considera el ancho de la pantalla y no el ancho del elemento, y hay algo así como la consulta de medios de contenedores, pero hoy en día no tienen casi ningún soporte de navegador