覆盖Nebular/Angular中元素的css

vsaztqbk 于 2023-05-30 发布在 Angular

关注(0)|答案(4)|浏览(108)

所以我正在尝试改变角星云主题的头元素的css
It looks like so
I want it to look like this
我试图将这两个元素（“MyApp”和操作栏）分开。通过控制台，我发现我必须将nb-header-layout中嵌入的nav元素的“justify-content”更改为“space-between”。我是这么做的
联系我们

<nb-layout-header class="header1">
    <app-header></app-header>
    <app-actions-bar></app-actions-bar>
</nb-layout-header>

css：

.header1 nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

但这些变化并不适用。为什么？我该怎么做？
我研究了不使用星云的布局标题，但似乎星云是强迫你使用它，否则它不会显示。

css

来源：https://stackoverflow.com/questions/71804207/overriding-elements-css-in-nebular-angular

4条答案

按热度按时间

0kjbasz61#

你确定CSS的加载顺序是正确的吗？如果一个组件在两个不同的文件中共享CSS，那么旧的文件将被新的文件重写

赞(0）回复(0）举报 2023-05-30

y3bcpkx12#

我认为你的CSS不适用，你可以这样替换你的CSS：

.header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

赞(0）回复(0）举报 2023-05-30

hrysbysz3#

我有点晚了，但是试试用：：ng-deep
它可以用来将样式强制到子元素，在这种情况下很有用，因为你想要应用样式的元素nav不包括在你的markdown中。例如：

::ng-deep nb-layout-header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
}

覆盖Nebular/Angular中元素的css

4条答案

相关问题

热门标签

最新问答