Настройка компонента iViewUI <Tag>

Question

Я использую iViewUI для моего компонента Tag, но я хотел настроить его размер и положение кнопки закрытия "X".

Мне удалось изменить ширину, просто добавив класс в тег, но по какой-то причине, даже я пытаюсь переопределить также его дочерний значок, вообще не реагирует на изменение, неприменяя это.Проверено в браузере, не добавляя его и там.

Это то, что я сделал до сих пор:

<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 здесь , пожалуйста, отметьте

Если вы используете scssed css, вы можете попробовать использовать deep selector

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

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