StencilJS組件樣式

使用的styles選項/屬性的正確方法是什麼？使用styles屬性與來自存儲庫stencil-component-starter的默認my-name組件似乎不會影響相應組件的樣式，也不會生成<head>中的<style>標籤。 styles打算如何工作？還是它尚未實施？如果目標是避免需要加載單獨的CSS資產，但爲組件提供樣式，那麼styles是正確的選擇，還是需要使用另一個屬性，例如host？StencilJS組件樣式

下面是從模版組件起動器產生的樣本成分] 1與具有styles屬性和設置font-size屬性替換stylesUrl @Component屬性。在dev或build任務期間不生成錯誤。

import { Component, Prop } from '@stencil/core'; 

@Component({ 
    tag: 'my-name', 
    styles: `my-name { font-size: 24px; }` 
}) 
export class MyName { 

    @Prop() first: string; 

    render() { 
    return (
     <div> 
     Hello, my name is {this.first} 
     </div> 
    ); 
    } 
}

ComponentDecorator被定義爲：

export interface ComponentOptions { 
    tag: string; 
    styleUrl?: string; 
    styleUrls?: string[] | ModeStyles; 
    styles?: string; 
    shadow?: boolean; 
    host?: HostMeta; 
    assetsDir?: string; 
    assetsDirs?: string[]; 
}

謝謝你的任何幫助，您可以提供！

來源

2017-10-09 Alexander Staroselsky

我剛剛嘗試過最新的版本0.0.6-22，現在看起來完全可行。

編譯時，它會告訴你你的樣式內容是否有效（主要是尋找有效的選擇器）。

這裏是工作示例（用一個簡單的字符串）：

import { Component, Prop } from "@stencil/core"; 

@Component({ 
    tag: "inline-css-example", 
    styles: 'inline-css-example { font-size: 24px; }' 
}) 
export class InlineCSSExampleComponent { 
    @Prop() first: string; 

    render() { 
    return <div>Hello, my name is {this.first}</div>; 
    } 
}

這一件作品也與ES6模板字符串（只顯示多行）：

import { Component, Prop } from "@stencil/core"; 

@Component({ 
    tag: "inline-templatestring-css-example", 
    styles: ` 
    inline-templatestring-css-example { 
     font-size: 24px; 
    } 
    ` 
}) 
export class InlineCSSExampleComponent { 
    @Prop() first: string; 

    render() { 
    return <div>Hello, my name is {this.first}</div>; 
    } 
}

（編輯展現進化自0.0.6-13）

來源

2017-10-12 20:18:01 Doppelganger9

謝謝！這很奇怪，'styles'只能和'styleUrl'結合使用。我的目標是避免生成由生成的資產生成和引用的CSS文件。也許這將在未來得到改進，'風格'內容將以某種方式與建築資產'JS捆綁在一起。 –

嘿@AlexanderStaroselsky你的意思是「只有聯結......」嗎？你是否需要這兩個'因爲這個答案中的示例只有''''''' –

@MatthiasMax最初的目標是使用'styles'屬性沿着注入樣式的行來避免需要單獨的樣式表。自提問/回答以來，對StencilJS進行了一系列關鍵更新，包括注入式樣。這不再是一個問題，謝謝！ –

StencilJS組件樣式

回答

相關問題