用本地 css 替换全局 css

Question

我正在尝试编辑弹出框的样式。在这种情况下，我想编辑显示的宽度。但是，我有一个全局弹出框样式表，适用于应用程序中的所有弹出框。

/* ========================================================================
     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;
}

编辑：本地样式表在显示popover的容器中，html中的classes都与填充popover的内容相关。虽然弹出框及其样式表处于全局级别。如何在本地级别编辑弹出框而无需触摸全局样式表。

另外，弹出框来自 ng-bootstrap，我认为问题是我无法覆盖引导设置的默认宽度

Answer 1

我不知道您所处的所有上下文，但有 3 种主要方法可以覆盖现有的 CSS 规则：

• 在现有规则之后添加带有新规则的新样式表；

1234563 ;

• 将“！important”添加到您添加的规则中，并打算覆盖其他规则，但请注意，如果现有规则已经有了，它将无法正常工作。

如果您的新弹出框与之前的示例有所不同，则可能有其他解决方案，例如利用 HTML 标记或 HTML 标记属性，具体取决于上下文。

我希望这会有所帮助。

编辑：我看到你已经编辑了你的问题，添加了一些东西。 查看全局 CSS，如果您的弹出框位于特定容器中，只需将新规则绑定到容器，如下所示： .team-activity-container .popover {...rules};