顯示兩個相鄰的 div，然后一個在其他下面顯示兩個不同的 SCSS 文件

Question

我有這個 HTML：

<div className="tab-header">
  <div className="container-header-comp">
    <div className="header-comp">some-text</div>
  </div>
  <div className="header-options">
    <div className="header-options-text">some-text</div>
  </div>
</div>

很簡單。 我有兩個 SCSS 文件，一個用於我的應用程序的兩個響應式設計（page.scss 和 page-responsive.scss）

我想顯示“container-header-comp”和“header-options”彼此相鄰，所以我的 page.scss 看起來像這樣（並且效果很好）：

.tab-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

現在，如果我想顯示相同的類，但不是彼此相鄰，我希望它們一個在另一個下面以用於我的響應式設計。 所以在 page-responsive.scss 我簡單地做了這個：

.tab-header{
  grid-template-columns : 1fr;
}

由於它位於另一個文件中，因此該樣式不適用於我的類（除非我應用 !important ，但我不想這樣做）。 我怎樣才能用我的兩個 scss 文件實現這個技巧？

Answer 1

嘗試

@media only screen and (max-width: 600px) {
{
    ....
   }
}