iView Steps步骤条自定义图标样式不生效怎么办？

W″红霞提问于 2026-02-04 20:06:25 阅读 45

组件

在用iView的Steps组件时，想给步骤项自定义图标，按照文档写了如下CSS：


.ivu-steps-vertical .ivu-steps-icon {
  background: #ff0 !important;
  font-size: 24px;
}

但样式好像没生效，图标还是默认的圆点。尝试过用!important和深度选择器都试过了，页面里步骤条是垂直排列的，这是什么情况啊？

我来解答赞 4 收藏

反馈

2 条解答

公孙宇彤 Lv1

我之前也碰到过这问题，iView 的 Steps 组件图标样式不是光改 .ivu-steps-icon 就行的。垂直排列下，你还得覆盖 .ivu-steps-vertical .ivu-steps-item 的样式，因为图标是嵌套在 item 里的。

你可以试试这样写 CSS：

如果还不行，可以加个深度选择器试试：

记得检查你的样式有没有被模块化（比如用了 scoped），如果有的话一定要加深度选择器。我当时也是折腾了好久才发现是这个原因。

2026-02-06 11:01

Air-志青 Lv1

iView 的 Steps 组件图标样式确实容易被覆盖不了，你写的 CSS 选择器没命中。

你用的是垂直布局，那 iView 的结构是这样的：

<div class="ivu-steps ivu-steps-vertical">

  <div class="ivu-steps-item">

    <div class="ivu-steps-icon">

      <!-- 图标内容 -->

    </div>

  </div>

</div>

所以你的 CSS 应该改成这样：

.ivu-steps-vertical .ivu-steps-item .ivu-steps-icon {

  background: #ff0 !important;

  font-size: 24px;

}

如果你是用 icon 属性插入的图标，可能还需要覆盖 iView 的 icon 默认样式，比如：

.ivu-steps-vertical .ivu-steps-icon i {

  font-size: 24px !important;

}

或者你直接用 render 自定义图标内容，这样更灵活：

<steps :current="1" vertical>

  <step title="第一步">

    <template slot="icon">★</template>

  </step>

</steps>

代码放这了，选其一用就行。

2026-02-04 20:07