修改 element 您所在的位置:网站首页 怎么变字体样式 修改 element

修改 element

2023-12-30 02:18| 来源: 网络整理| 查看: 265

最近遇到了一个需求,el-tab-pane的label属性默认的字体大小为14px,在一个光秃秃的页面上展示时很小,需要把字体改大一些。

这还不简单?

我直接f12打开开发者模式,样式选择器选择el-tabs-pane,选择style,查看.el-tabs__item的font-size:14px;属性。好,就是他,代码里直接改!

.el-tabs__item{ font-size:18px !important; }

大功告成!刷新页面一看!卧槽?怎么回事,我怎么把全局样式改了?害,没事,这还难得到我?我直接反手就是一个scoped

.el-tabs__item{ font-size:18px !important; }

再一刷新,这下总该完成了吧?等等,这虽然其他的缩小了,但是我要放大的咋没放大?!!!!!眉毛一皱,发现事情并不简单。

scoped是作用在本页面没错,但是el-tab-pane作为一个外部引入的组件,好像不受这个控制?

那只能放大招了,使用 /deep/强制渲染!

/deep/.el-tabs{ .el-tabs__item{ font-size:18px; } }

这样就解决了。挺好,我正沾沾自喜,需求眼镜一推,小样,我能让你这么轻松?再给我加个el-tab-pane,字体大小颜色和样式都要和上面那个不一样的!

我当场吐血,心里把这需求打了一万遍,就你有嘴,就你会叭叭叭。但是谁还不是社畜了,心里我重拳出击,表面我还得唯唯诺诺。需求还得完成,咋办?

我仔细一看这选项卡的字体,呀,原来是你小子!

这下好办了,但凡是你带个label属性,就没有难道我的。

选项卡1 .fontClass{ font-size:72px; font-family: Microsoft Yahei; }

直接使用span标签来展示文字,使用其slot属性,改为label,会自动嵌入上一级el组件里(如果该组件有label属性的话)。接下来给这个span加个类选择器,直接给其增加样式就OK了。

八十,八十,八十,大哥,搞定了!



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有