自定义iViewUI <tag>组件

Question

我将iViewUI用于Tag组件，但我想自定义其大小以及“ X”关闭按钮的位置。

我能够通过简单地向Tag添加一个类来更改宽度，但是由于某种原因，即使我试图覆盖其子图标，也完全不响应更改，没有应用它。在浏览器上检查，也未在其中添加。

这是我到目前为止所做的：

<Tag class="Badge-tag" color="warning" closable @on-close="removeTag">{{ badge }}</Tag>

然后在较少的文件上添加以下内容：

.Badge-tag {
    width: 60px;
    position: relative;

    .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}

我根本没有运气。我不知道为什么不设置它。

Answer 1

如果您将css设置为全局css，我认为它应该起作用。

我在jsfiddle here上创建了一个演示，请检查

如果您使用范围内的CSS，则可以尝试使用deep selector

.Badge-tag {
    width: 60px;
    position: relative;

    /deep/ .ivu-icon.ivu-icon-ios-close {
        position: absolute;
        right: 2px;
        top: 4px;
    }
}