如何在elementUI中编辑el-breadcrumb的样式

Question

我正在尝试设置el-breadcrumb-item的字体大小，并通过chrome的调试工具查找此标记的样式;我找到

它显示el-breadcrumb-item的字体大小是继承自el-breadcrumb，因此我尝试设置el-breadcrumb的字体大小和类似

的代码

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">HOME</el-breadcrumb-item>
    <el-breadcrumb-item>rankingList</el-breadcrumb-item>
  </el-breadcrumb>
</template>


<style scoped>
  .el-breadcrumb {
    font-size: 5em;
  }
</style>

但它失败了，el-breadcrumb-item的字体大小根本没有变化 它看起来像那样

Answer 1

您应该在element-ui默认.css文件中进行更改。 它的优先级高于CSS，因此可以覆盖您的更改。

Answer 2

取消作用域，您的样式将覆盖默认的元素样式。