覆盖ng-Bootstrap样式

时间:2018-05-10 19:06:31

标签: css sass popover ng-bootstrap

我是css的新手,所以仍然试图解决这个问题,但我有一个流行音乐,我正试图风格。该组件由ng-bootstrap提供,并具有针对应用程序主题的一般sass样式。现在我正在尝试更改弹出窗口的宽度但是我似乎无法将其增加到超出设定宽度(约276px)。

为了澄清,我尝试在容器中更改pop-over的类的样式,但这仅适用于容器本身提供的pop-over的内容而不是pop-over的主体,因此内容宽度增加并且它们溢出但是弹出本身保持相同的大小。

我已经尝试编辑为主题提供的scss文件,这些文件在容器主体上工作,但宽度不会增加所以我相信ng-bootstrap应用的最大宽度我似乎无法覆盖。我想知道如何在本地scss文件中覆盖样式。

下面是全局弹出主题的代码以及我本地容器的当前代码。 全球主题:PopOver.scss

.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;
        }
    }
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        li {
            margin: 0 -1rem;
            padding: 0.5rem 1rem;
        }
        li:hover {
            background: $table-accent-bg;
            cursor: pointer;
            & a {
                text-decoration: none;
                color: $body-color;
            }
        }
    }
}

本地样式表:team-container.component.scss

.team-container {

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

    .icon.icon-team {
      background-position: -5px -5px;
      width: 25px;
      height: 25px
    }
}

文件的位置,如果它很重要:

-Lib / Themes(全球主题风格)

-Src / app / containers / team(目标popOver位于此处)

我想出来了!不幸的是,只能通过更改全局css类.popover 如何在我的本地css文件中覆盖.popover? 我已经尝试过.popover .team-container而且它没有用。

0 个答案:

没有答案