欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ElementUI修改默认样式

程序员文章站 2022-06-07 13:45:18
...
1、修改全局(主颜色或者样式)
//自定义主题
//修改样式
在App.vue文件中引入

import 'css/override-element-ui.css';(外部样式)//override-element-ui是自己新建的css

或者 (内部样式)// el-tabs__item 是F12检查页面代码时可以看到elementui组件tabs对应的样式

<style>
.el-tabs__item{
   padding:0 10px;
}
</style>
2、修改局部(样式)组件demo.vue
<template>
 <div class="market_out">
     <el-tabs v-model="activeName"  class="tabs_title">
          <el-tab-pane :label="$t('text.all')" name="first"></el-tab-pane>
          <el-tab-pane :label="$t('market.optional')" name="second"></el-tab-pane>
      </el-tabs>
  </div>
</template>
<style scoped>
market_out.el-tabs__item{
   padding:0 10px;
}
</style>
//局部修改 market_out .el-tabs__item 这种写法,不影响其他组件使用默认的tabs控件