замена глобального CSS локальным CSS

Question

Я пытаюсь отредактировать стиль поповера. В этом случае я хочу редактировать ширину дисплея. Тем не менее, у меня есть глобальная таблица стилей popover, которая применяется ко всем popovers в приложении.

/* ========================================================================
     Component: popovers
 ========================================================================== */

.popover {
    border-radius: 0;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    .arrow {
        margin-left: -7px !important;
    }
    .popover-header {
        padding: 1rem 0.75rem 0.5rem;
        display: block;
        background-color: $secondary;
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .popover-body {
        padding: 0.5rem 1rem;
        color: $body-color;
    }
    .popover-close {
        position: absolute;
        top: -2px;
        right: 0;
        padding: 0 0.5rem;
        color: $gray-lighter;
        font-size: 2rem;
        font-weight: 400;
        line-height: 1;
        text-shadow: 0 1px 0 #fff;
        &:hover {
            cursor: pointer;
            color: $body-color;
        }
    }

Я хотел бы знать, как в моем локальном CSS-файле я могу перезаписать / добавить эти унаследованные стили.

Местная таблица стилей:

.team-activity-container {

    .icon {
      background-image: 
      background-repeat: no-repeat;
      display: inline-block
    }

    .icon .icon-team {
      background-position: -5px -5px;
      width: 25px;
      height: 25px
    }
}
.popover {
  background-color: aqua !important;
  width: 500px;
}

Редактировать: локальная таблица стилей находится в контейнере, который отображает всплывающее окно, и все классы в html связаны с содержимым, которое заполняет всплывающее окно. Пока поповер и его таблицы стилей находятся на глобальном уровне. Как я могу редактировать поповер на местном уровне, не касаясь глобальной таблицы стилей.

Кроме того, popover от ng-bootstrap, и я считаю, что проблема в том, что я не могу перезаписать ширину по умолчанию, установленную при начальной загрузке

Answer 1

Я не знаю весь контекст, в котором вы находитесь, но есть 3 основных способа перезаписать существующие правила CSS:

• добавить новую таблицу стилей с новыми правилами после существующих;

• если у вас есть контроль над новым всплывающим HTML, добавьте класс (например, версию 2, чтобы вы могли редактировать свой вариант осмысленно как .popover.version2, наследуя то, что уже установлено, и изменяя только то, что вам нужно) ;

• добавьте «! Important» к добавляемым вами правилам, и они предназначены для перезаписи других, но обратите внимание, что если существующие правила уже это сделали, это не сработает.

Зависит от контекста, могут быть и другие решения, такие как использование тегов HTML или свойств тегов HTML, если ваш новый поповер имеет некоторые отличия от предыдущего для примеров.

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Я видел, что вы отредактировали свой вопрос, добавив материал. Глядя на глобальный CSS, если ваш поповер находится в определенном контейнере, просто привяжите новые правила к контейнеру следующим образом: .team-activity-container .popover {... rules};