我正在創建一個反應電子商務應用程式，我需要為購物車使用相同的組件，它占據整個螢屏，而對于帶有購物車的下拉選單，它要小得多。
我想要做的是在渲染下拉購物車時將一個類作為道具傳遞，然后在容器中使用它來有條件地設定其他所有元素的樣式。
代碼將是這樣的：
像這樣傳遞道具
<CartContent className={"cart-overlay"} />像這樣在容器中抓取類：
<div className={`cart-element ${className === "cart-overlay" && "cart-overlay"}`}>
然后我想做的，這就是我不知道該怎么做，在 scss 中是這樣的：
.cart-overlay{
&.child-of-cart-overlay{
styles: cool;
}
}
我如何設定購物車覆寫的孩子的樣式，而不必在我想要設定的每個元素中獲取 className 并直接使用這兩個類進行選擇？
媒體查詢不起作用，因為它考慮螢屏寬度而不是元素寬度，并且有類似容器媒體查詢的東西，但它們今天幾乎沒有任何瀏覽器支持
uj5u.com熱心網友回復：
CSS 解決方案是在覆寫的背景關系中重新定義元素的樣式：
.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;
}
}
這樣，您不需要對元素本身應用任何額外的類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/478192.html
標籤：javascript css 反应