app.css 上的更改未应用于 GUI

Question

我正在尝试更改按钮在 NativeScript 上的默认外观 core.light.css 所以在 @import 之后我添加了一些规则。有些正在应用，有些则没有。我已经做了几年的网络开发人员，所以我对 CSS/HTML 非常熟悉，但在这里我真的很想念一个浏览器检查器来找出我的错误所在。

这是app.css中的CSS规则：

.nav Button {
  border: 1px solid grey;
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
}

这是我在 page.component.html:

<StackLayout class="nav">
    <Button text="First" 
        [nsRouterLink]="['/first']"></Button>
    <Button text="Second"
        [nsRouterLink]="['/second']"></Button>
    <Button text="Third"
        [nsRouterLink]="['/third']"></Button>
    <Button text="Fourth"
        [nsRouterLink]="['/fourth']"></Button>
</StackLayout>

这就是它在 iOS 模拟器上的样子：

1px solid 边界在哪里？我在这里错过了什么？

Answer 1

您是否尝试过将子选择器添加到您的 css？ https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors so a space should work :/ https://docs.nativescript.org/ui/styling#hierachical-selector-css-combinators 我只使用了 > 选择器。如果您认为它没有正常工作，请提交错误。

Answer 2

已解决。在此发布解决方案，以帮助未来的受害者。

显然之前尝试过的所有配置都应该有效。常用的规则.nav Button、子选择器.nav > Button、.navbuttonclass应用于Button元素……这些都可以。尽管我不得不按照@Nick 在我接受的答案中的建议将 border: 1px solid grey; 分成三行（border-width、border-color 和 border-style）。

起初我使用 tns livesync ios --emulator --watch 以便立即查看更改。当未显示更改时，我关闭了应用程序，键入 tns run ios 并显示了更改，但此元素除外。

所以我做了 tns platform remove ios、tns plantform add ios，最后 tns run ios。这解决了问题。我认为有某种持久性或缓存选择了那个特定元素只是为了惹恼我。

Answer 3

实时同步 CSS 文件在我这边按预期工作。但是，请记住，NativeScript 仅支持 CSS 的一个子集，并且一些来自网络的语法不适用于 NativeScript

so 而不是 border: 1px solid grey;

使用

.nav Button {
    border-width: 1;
    border-color: gray;
    border-radius: 20;
}

可以找到支持的 CSS 属性列表 here

app.css 上的更改未应用于 GUI

Changes on app.css are not applied on GUI

css

nativescript

angular2-nativescript