app.css上的更改不適用於GUI

我試圖更改NativeScript上的按鈕默認外觀core.light.css所以在@import之後我添加了一些規則。一些正在應用，但其他一些則不適用。我幾年來一直是Web開發人員，所以我對CSS/HTML非常熟悉，但在這裏我真的錯過了一個瀏覽器檢查器，以查明我的錯誤在哪裏。app.css上的更改不適用於GUI

這是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邊界？我在這裏錯過了什麼？

來源

2016-12-03 zJorge

實時同步CSS文件按我的預期工作。但是，請記住，NativeScript僅支持CSS的一個子集，並從一些網站的語法並不適用於NativeScript

所以不是邊界：1px的固體灰色;

使用

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

支持的CSS屬性的列表可以發現here

來源

2016-12-05 11:39:37

謝謝尼克。我也已經改變了。還有一些其他規則還沒有被應用。它可能是我的項目設置，忽略保存時的某些更改，以節省時間更新？ – zJorge

我懷疑它是由設置引起的 - 有些修復引入了lifeync，但爲了應用它們，您將需要@next版本（npm uninstall -g nativescript .... npm install -g nativescript @ next ...移除平臺文件夾並重新運行livesync）。 –

你有沒有嘗試向你的css中添加子選擇器？ https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors所以一個空間應該工作：/ https://docs.nativescript.org/ui/styling#hierachical-selector-css-combinators我只使用>選擇器。如果你覺得它不像它應該那樣工作，請提交一個錯誤。

來源

2016-12-03 22:28:39

剛試過了「>」子選擇器，你建議，但也不能工作。最有可能是我的錯誤，我沒有找到它，所以我會繼續嘗試之前提交一個錯誤。我真的很想念這裏的Chrome檢查員... – zJorge

核心團隊專注於2.5版的調試和工具，一度有傳言說檢查人員很快就會顯示出來，所以我們希望這是下個月的發佈:)我感覺到你的之前疼痛在這裏。因此，孩子選擇器只是第一個孩子，而你所擁有的空間應該是所有的孩子。我從來沒有嘗試過，所以我不能確定。我會嘗試添加一個類作爲其他答案的建議，至少這是一個解決方案，如果選擇器是一個錯誤 –

已經嘗試使用這些按鈕上的類，但它也沒有工作。我確實有一個頁面{顏色：黑色; }對app.css的規則，就像你在圖片上看到的那樣，工作正常，所以標籤選擇器似乎不是問題。 – zJorge

已解決。在這裏發佈解決方案，以幫助未來的受害者。

顯然以前所有以前的配置嘗試應該實際上工作。常用規則.nav Button，子選擇器.nav > Button,.navbutton類應用於Button元素......這些都很好。儘管我必須將border: 1px solid grey;分爲三行（border-width,border-color和border-style），因爲@Nick在我的接受安裝程序中建議。

起初我使用tns livesync ios --emulator --watch爲了立即看到變化。當沒有顯示更改時，我關閉了應用程序，輸入tns run ios並顯示更改，但此元素除外。

所以我做了tns platform remove ios,tns plantform add ios，最後是tns run ios。這解決了這個問題。我認爲有某種持久性或緩存選擇了特定的元素，只是爲了惹惱我。

來源

2016-12-03 23:21:25 zJorge

app.css上的更改不適用於GUI

回答

相關問題