因為之前官網(wǎng)uni-ui有些組件的樣式不好看，所以要做一些調(diào)整，做個記錄。用分段器舉例~

官網(wǎng)原生樣式

調(diào)整后的

首先找到我們的static文件夾，里面一般存著項目的全局樣式文件，沒有的話自己創(chuàng)一個

uniui.scss

  /deep/ .segmented-control__item--text {font-weight: bold;border-bottom-width: 0 !important;}/deep/ .segmented-control__item--text::after {content: ""; /* 偽元素內(nèi)容為空 */position: absolute; /* 絕對定位 */left: calc(50% - 10px); /* 從左邊開始 */bottom: 0; /* 與內(nèi)容底部對齊 */width: 20px; /* 設(shè)置下劃線的寬度 */height: 4px; /* 下劃線的高度 */background-color: #0574ff;border-radius: 4px; /* 設(shè)置圓角 */}

在全局scss文件index.scss中引入uniui.scss

// global
@import "./global.scss";
// color-ui
@import "@/static/scss/colorui.css";
// iconfont
@import "@/static/font/iconfont.css";
// uni ui 
@import "./uniui.scss";

在App.vue入口文件中引入樣式

<style lang="scss">
@import "@/static/scss/index.scss";
</style>

搞定~