Vue中使用Element ui修改預設樣式

2021-10-07 21:42:59 字數 1080 閱讀 7192

在使用外部 ui 元件 element-ui 的過程中,需要覆蓋預設樣式,自己定義樣式。在此記錄使用中遇到的問題

1、全域性樣式

在 vue 專案中,可以建立乙個全域性樣式表,如下圖中的 global.css,可以覆蓋 ui 元件中的樣式,但是有乙個缺點,就是整個專案中該型別的元件都會被渲染。

例如:我想要修改 element-ui 中 el-table **的單元格字型大小,可以在 global.css 中寫入下列**。整個專案都會以下字型大小顯示。

.el-table

2、在自定義元件中覆蓋預設樣式

2.1 修改前的 element-ui 中 el-input 預設樣式

在此想要修改 input 輸入框的背景顏色,可以在瀏覽器中分析其class樣式,可以看到背景樣式在 .el-input__inner 這個 class 中。

scoped 限定了只在當前元件有效,如果去掉了,和全域性樣式就一樣了。我使用了 less 規則,有的可能會不一樣,如果沒有效果,或者報錯,可以試試將/deep/替換成>>>

2.3 修改後的樣式

在vue中使用element ui

目錄 封裝element ui 1.完整引入element ui外掛程式 2.按需引入 03 需要在main.js中匯入一下 04 在頁面中使用 封裝的下拉多選元件 安裝element ui npm install element ui import elementui from element u...

elementUI在vue中使用的問題

安裝及使用 1 npm i element ui s 2 在main.js中 import vue from vue import elementui from element ui import element ui lib theme chalk index.css vue.use elemen...

vue專案中使用element ui封裝選單樹

一.效果圖 底層使用el menu選單元件,專案中要求動態獲取選單樹,並且層級不固定。所以就在el menu元件基礎上封裝了一下。二.實現 sidebar.vue 檔案 width 200px style background color f3f6f9 background color menubg...