在vue項(xiàng)目開(kāi)發(fā)中，我們經(jīng)常需要用到第三方組件庫(kù)，如elementUI、Vant等，這些組件的特點(diǎn)之一是樣式都是封裝好的，有時(shí)候組件的默認(rèn)樣式和我們需要的樣式會(huì)有一些差別，這時(shí)就需要做一些修改。

一、修改組件默認(rèn)樣式

首先我們隨便用一個(gè)組件來(lái)舉個(gè)例子，就用elementUI主要按鈕吧。

<template>
  <div class="index-wrap">
    <el-button type="primary">我是一個(gè)主要按鈕</el-button>
  </div>
</template>

默認(rèn)是藍(lán)色背景高度40的，現(xiàn)在我們想讓它變成粉色背景，高度30。

這時(shí)我們可以通過(guò)檢查網(wǎng)頁(yè)的元素獲取組件的類名，得到這個(gè)按鈕組件的類名有"el-button" 和 "el-button--primary" 。

image.png

我們選擇哪個(gè)都可以添加樣式，為了不影響其它類型的按鈕，我們就把樣式加給"el-button--primary"類吧。

<style scoped>
.el-button--primary {
  background: pink;
  border-color: pink;
  height: 30px;
}
</style>

看上去毫無(wú)問(wèn)題，可是我們的修改卻失敗了。

甚至連檢查元素發(fā)現(xiàn)我們寫(xiě)的屬性根本沒(méi)有加上去：

二、失敗原因及注意事項(xiàng)

其實(shí)我們修改方法并沒(méi)有問(wèn)題，問(wèn)題出在了scoped身上，大家都知道在style標(biāo)簽上加上這個(gè)是控制所寫(xiě)的樣式不影響其它頁(yè)面（或組件），可是第三方組件庫(kù)的東西，其實(shí)是一個(gè)我們引入的、外來(lái)的、寫(xiě)好的組件啊，準(zhǔn)確地說(shuō)它并不是我們當(dāng)前這個(gè)頁(yè)面（組件）的內(nèi)容，scoped只影響當(dāng)前頁(yè)面（組件），所以我們?cè)趕coped里肯定修改不到第三方組件的樣式。

所以這時(shí)候我們就要去掉scoped，為了不影響當(dāng)前頁(yè)面其它內(nèi)容，我們可以再寫(xiě)一個(gè)不帶scoped的style標(biāo)簽，同時(shí)，為了不污染項(xiàng)目中其它地方使用的到的第三方組件，我們一定要加上一個(gè)獨(dú)有的類名，比如我寫(xiě)的這個(gè)組件的類名index-wrap。
當(dāng)然，如果確定整個(gè)項(xiàng)目的這個(gè)組件都要改，我們也可以直接寫(xiě)到公共樣式文件里。
現(xiàn)在修改如下：

<style scoped>
    /* 其它樣式 */
</style>

<style>
.index-wrap .el-button--primary {
  background: pink;
  border-color: pink;
  height: 30px;
}
</style>

現(xiàn)在可以看到我們的自定義樣式已經(jīng)添加上去了，其它的第三方組件修改方法也是一樣的~ 可以根據(jù)自己的需求修改。

image.png