我使用一個外部庫css(內部開發的),但是分享它是沒有用的。

我的問題如下:

我用角形，我有這個:

testSelect.componenent.html:

<div class="c-input c-input--select">
  <select id="selectID"> 
    <option> bla bla </option>
  </select>
</div>

和我的testSelect.componenent.scss:

.c-input--select {
  padding: 1.5rem;
}

事實是沒有應用填充。

我猜我的外部CSS庫正在覆蓋我的小scss...

當我像這樣添加一個環繞div時:

<div class="test">
  <div class="c-input c-input--select">
    <select id="selectID"> 
      <option> bla bla </option>
    </select>
  </div>
</div>

隨著

.test {
  padding: 1.5rem;
}

它正在工作。但是我想就代碼的整潔性和可重用性而言，這并不好...

我該怎么辦？

你可以使用Chrome開發者工具來查看哪些CSS類影響了你的元素。

右鍵單擊Chrome中有問題的元素，然后選擇Inspect Element。您將看到影響您的元素的每一個CSS類。

很可能你是對的，你的外部庫中的某個類正在影響它。如果是這種情況，您有幾個選擇。

最好的選擇是為整個組件創建一個特定的CSS類，并將整個模板包裝在該類中，就像你建議的re:周圍的Div，但是是在整個組件級別。給它起一個特定于你的組件的名字，這樣就不會有名字沖突了。

您的第二個選擇是使用！重要的是，如果你沒有其他選擇，你真的應該這樣做。沒有其他選擇的情況是，如果您導入的CSS庫將這些類定義為！重要本身。如果他們這樣做，你真的沒有其他選擇，除了要求維護庫的團隊停止使用！重要。