vue中Element ui樣式修改

2022-08-16 20:27:11 字數 848 閱讀 2321

下拉框(el-dropdown)

// hover 下拉框的hover效果

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover

麵包屑的字型(el-breadcrumb)
.home .el-breadcrumb__inner a,

.home .el-breadcrumb__inner.is-link

**樣式(el-table)
.el-table 

// 奇數行背景修改

tbody tr

// 偶數行背景修改

tbody .el-table__row--striped td

}

輸入框 (el-input)
// 輸入框

.el-input__inner

}

element-ui 修改注意點

當無法修改時,可以嘗試一下幾種方法

/deep/

// 輸入框

/deep/ .el-input__inner

}

去除scoped (不推薦)

// 往往這樣我會給這個元件定義乙個獨一無二父級,避免樣式衝突

.box

}

定義全域性樣式檔案 (此方法推薦公共樣式管理時使用)

// 在main.js中引入此檔案

import './styles/publistyle.scss'

vue中Element ui樣式修改

下拉框 el dropdown hover 下拉框的hover效果 el dropdown menu item focus,el dropdown menu item not is disabled hover 麵包屑的字型 el breadcrumb home el breadcrumb inne...

vue 新修改element ui的樣式

element ui樣式是很難修改的。修改 滾動條樣式 data tabledata height 250 border class your table style width 100 prop date label 日期 width 180 el table column el table cs...

vue覆蓋elementui樣式的幾種方式

但是這樣的話需要增加命名空間以解決汙染問題。當你子元件使用了 scoped 但在父元件又想修改子元件的樣式可以 通過 來實現 el checkbox input el checkbox inner is leaf el checkbox el checkbox inner 當使用了sass等css預...