1. 程式人生 > >如何區域性覆蓋element-ui的預設樣式

如何區域性覆蓋element-ui的預設樣式

最近專案中遇到的問題,只想在某個元件裡面更改element-Ui的樣式,而不影響全域性。在網上看了很多瞎jb扯的東西,根本不適用或者沒效果。

直接說方法:在需要更改的元件裡新增一個style標籤【重點:不要加scoped】,然後直接獲取class設定樣式就可以咯,class自己去瀏覽器裡右鍵審查元素可得到。

建議:在獲取到的樣式里加上能限制範圍的父層選擇器,不然就變成全域性樣式咯。

<style>
  .ruzhu-mess .el-form-item__label{
    font-size:16px!important;
  }
  .zhuanye-mess .el-form-item__label,.zhuanye-mess .color-t{
    font-size:16px!important;
    color:#606266;
  }
</style>
<style lang="scss" scoped>

  @import '../../../assets/scss/pages/organizationUserCenter1.scss';

</style>

打個廣告:
關注公眾號 “enjoy的生活“ 給你推薦優秀的小說動漫遊戲,幫你查詢各種資源,學習網路技術。
而且可以留言讓後臺的人幫你找資源、修電腦、p圖,簡直全能

相關推薦

如何區域性覆蓋element-ui預設樣式

最近專案中遇到的問題,只想在某個元件裡面更改element-Ui的樣式,而不影響全域性。在網上看了很多瞎jb扯的東西,根本不適用或者沒效果。 直接說方法:在需要更改的元件裡新增一個style標籤【重點:不要加scoped】,然後直接獲取class設定樣式就可以咯,class

覆蓋element ui樣式

ant 重新 修改 idt 使用 element app width class 我們可以使用 !important 來覆蓋element ui 的樣式 首先先在瀏覽器中找到 我們所要修改的樣式 ,然後找到她的 class 重新寫他的樣式 ,例如 . app

Vue修改mint-ui預設樣式預設風格)

加入my-mint.css 我這裡用的postcss的變數定義,如果親們用的是其他前處理器,要改成其他處理器的定義方式 覆蓋mint-ui的primary顏色,改為自己UI的主題色 --main-color: #f76349; /* 橙色 主色調 */ .mint-header { backgrou

如何單頁面覆蓋element元件原有樣式

看了很多部落格,很多方法都是全域性改變元件的樣式,而很多時候我們只需要單獨改變這一個頁面的樣式就行。方法如下 首先,在瀏覽器裡檢查元素,檢視原有樣式名字,然後在vue檔案裡新建一個css <style lang="scss"> </style> 記住不要加sc

vue 專案全域性修改element-ui樣式

引入了element-ui,但是和我們自己的樣式顏色有很大的不同, 修改例子:在src檔案下建立 element-var.scss,程式碼如下 $--color-primary: yellow;  /*修改按鈕primary的顏色*//* 改變 icon 字型路徑變數,必需 */$--font-

vue element-ui-tree樣式總結

  專案要實現一個右鍵點選tree節點彈出選單的需求。(暫時沒做出來,後續待更新)。 1.從element裡面找到了自定義的。(詳見UI中tree自定義節點內容)。 2.直接上程式碼。 renderContent (h, { node, data, store }) { return

vue修改mint-ui預設樣式

用mint-ui使用switch開關時。與主題顏色不匹配 解決辦法: 這裡預編譯css用的stylus 新建一個mint-ui.styl $color-theme = #D91D35 .mint-switch-input:checked + .mint-switch-core  

修改element-ui元件樣式

在專案開發過程中,為了提高開發效率,使用了element-ui的元件庫,但同時帶來一個問題就是元件的樣式並非我們想要的,通過加id這種方法的能提高元素的部分層級,但是對於一些元件內部通過一些條件新建立的元素,我們控制樣式就比較無能為力了,於是我們考慮修改原始碼。

element ui 修改預設樣式

修改element ui預設的樣式 如果要元件內全域性修改 首先在瀏覽器裡F12找到element預設的UI類名 找到要修改的預設類名以後 在檔案中修改程式碼,重寫屬性 <style> .el-form-item__label{ //你要修改

自定義element-ui主題,修改樣式

改版 引入 一個 css template div 應用 根據 得到 項目需求 之前項目中引用的select選框有bug,所以需要改動,考慮到還有許多需求,果斷將餓了麽組件全移過來 安裝element-ui2.0.1版本 安裝完之後,我就將element-ui的組件應用上,

Element-ui之修改樣式

介紹 del The import 方式 樣式 每一個 只需要 寫法 修改樣式的方法 官網上面介紹了幾種方法; 當然還有其他的方法,比如直接在vue文件的style裏面設置樣式進行覆蓋,或者引入其他的scss文件(誰說的一定要引入variables.scss,我偏不信),

修改element ui 默認樣式最好的解釋

html key git xxx card har def 默認 vuejs KedAyAyA 17年10月 https://forum.vuejs.org/t/elementui/19171/5 首先添加了scoped的style標簽會在vue-loader

vue組件樣式添加scoped屬性之後,無法被父組件修改。或者無法在本組件修改element UI樣式

lang tro att orm 宋體 ttr 符號 Language 避免 在vue開發中,需要使用scoped屬性避免樣式的全局幹擾,但是這樣在父組件中是無法被修改的,不僅如此如果項目中用了UI框架比如element Ui,這個時候在本組件也無法修改樣式,因為權重問題。

vue元件樣式新增scoped屬性之後,無法被父元件修改。或者無法在本元件修改element UI樣式

在vue開發中,需要使用scoped屬性避免樣式的全域性干擾,但是這樣在父元件中是無法被修改的,不僅如此如果專案中用了UI框架比如element Ui,這個時候在本元件也無法修改樣式,因為權重問題。但是想要修改還是有方法的: 1. 在不去掉scoped的情況下,在全域性樣式中覆蓋,這種解法,有弊端,可能會汙

重啟vue出現兩個bug,一個是element-ui樣式檔案不存在,另一個是vue-style-loader!css-loader?

These dependencies were not found: * element-ui/lib/theme-default/index.css in ./src/main.js * !!vue-style-loader!css-loader?{"sourceMap":true}

element ui 中的時間選擇器怎麼設定預設值/el-date-picker區間選擇器怎麼這是預設

template程式碼 <el-date-picker value-format="yyyy-MM-dd" v-model="search.date" type="daterange" align="ri

element ui tree 高亮預設顯示,this.$nextTick(() => { this.$refs.tree.setCurrentKey(value);}

<!-- Unit.vue --> <template> <div> <div class="container"> <el-row :gutter="20"> <!-- 左側內容 -->

Element-ui自定義table表頭,修改列標題樣式、新增tooltip, :render-header使用簡介

關注我的個人部落格:pinbolei.cn,獲取更多內容 render-header render-header在官方文件中的介紹是這樣的: 引數 說明 型別 可選值 預設值

vue+element ui 表格自定義樣式溢位隱藏

樣式 .hoveTitle {   text-align: left;   width: 140px;   overflow: hidden;   text-overflow: ellipsis;   whit

vue+element ui 學習筆記 【table篇】table預設選中選中一行setCurrentRow(row)以及預設選中多行toggleRowSelection(row,selected)

序言 根據工作的需求,需要實現兩個table實現頭行級聯的功能,所有在呼叫vue例項物件後,頁面掛載完後需要預設選中頭的table,獲取行資料的id來通過介面實現頭行級聯功能。幹起來~~~~ 1 element ui-----table預設選中一行setCurrentRo