【前端】修改acro element UI等封装元素的样式、字体

supporint

已于 2023-01-24 18:52:33 修改

阅读量828

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue 文章标签： html5 vue.js

于 2023-01-15 20:56:29 首次发布

本文链接：https://blog.youkuaiyun.com/Supporint/article/details/128697371

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

vue

5 篇文章

订阅专栏

本文介绍了如何在前端开发中，特别是使用Vue.js时，修改框架封装的UI元素如Acro element的样式和字体。通过应用CSS深度选择器，如>>>或SCSS的::v-deep，开发者可以穿透组件的封装，实现对内部样式的定制，以匹配Figma设计稿的字体样式。文章强调了正确使用CSS深度选择器的重要性，并分享了作者在劳逸结合中解决问题的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="address">
          <div class="word" :title="account">{{ format(account) }}</div>
          <div class="icon" @click="copyAddress(account)" 
</div>

这种div的样式好修改，只需要

.address.word{
//需要的字体样式
}

但是在修改框架封装好的UI元素时，变得棘手起来，比如，

<a-tabs default-active-key="1">
        <a-tab-pane key="1" :title="t('profile.myDomain')">
 ....

你要修改
在这里插入图片描述
修改为制订figma设计稿的字体样式。

这就要用到具有穿透特性的“css深度选择器”
1、如果用的是原生的css样式，可以直接使用>>>

.detail >>> .arco-tabs-tab-title{
//需要的字体样式
}

2、如果用了预处理器scss，可以使用::v-deep或者/deep/，更推荐使用前者，一是兼容性更好，二是加载速度更快。

.detail {
  margin-top: 54px;
  ::v-deep .arco-tabs-tab-title {
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    color: #ADADAD;
    }
}