Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

index.php/tags-41973.html" >���录

默认样式

修改默认字体颜色：

修改鼠标悬浮/选中字体颜色：

去掉长分割线并修改下划线颜色

完整代码

---

默认样式

注意事项：一定要在 不然修改的样式不会覆盖生效

修改默认字体颜色：

::v-deep .el-tabs__item {    color:green;    opacity: 0.5;}

修改鼠标悬浮/选中字体颜色：

::v-deep .el-tabs__item.is-active {  color: red;//选中  opacity: 1;}::v-deep .el-tabs__item:hover {  color: red;//悬浮  cursor: pointer;  opacity: 1;}

去掉长分割线并修改下划线颜色

/*去下划线 */::v-deep .el-tabs__nav-wrap::after {  position: static !important;}/* 下划线颜色 */::v-deep .el-tabs__active-bar {  background-color: red;}

完整代码

            User        Config        Role        Task    import { ref } from 'vue'import type { TabsPaneContext } from 'element-plus'import { ElTabs, ElTabPane } from "element-plus";const activeName = ref('first')const handleClick = (tab: TabsPaneContext, event: Event) => {    console.log(tab, event)}.demo-tabs>.el-tabs__content {    padding: 32px;    color: #6b778c;    font-size: 32px;    font-weight: 600;}::v-deep .el-tabs__item {    color: green;    opacity: 0.5;}/**选中 */::v-deep .el-tabs__item.is-active {    color: red;    opacity: 1;}/**悬浮 */::v-deep .el-tabs__item:hover {    color: red;    cursor: pointer;    opacity: 1;}/*去下划线 */::v-deep .el-tabs__nav-wrap::after {    position: static !important;}/* 下划线颜色 */::v-deep .el-tabs__active-bar {    background-color: red;}