스텐실 부품 스타일

ComponentDecorator의 styles 옵션/속성을 사용하는 적절한 방법은 무엇입니까? styles 속성을 기본값 my-name (저장소 stencil-component-starter)의 구성 요소로 사용하면 해당 구성 요소의 스타일에 영향을주지 않으며 <head>에 <style> 태그를 생성하지 않습니다. styles은 어떻게 작동합니까? 아니면 아직 구현되지 않았습니까? 로드해야 할 별도의 CSS 애셋이 없지만 구성 요소에 스타일을 제공하지 않으려면 styles이 올바른 선택이거나 host과 같은 다른 속성이 필요합니까? 이하 스텐실 부품 스타일

스텐실 성분 스타트로부터 생성 된 샘플 성분]은 styles 속성 및 속성을 설정 font-size 대체 stylesUrl @Component 속성 1이다. dev 또는 build 작업 중에 오류가 생성되지 않습니다.

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

당신이 제공 할 수있는 모든 도움을 주셔서 감사합니다 :로

ComponentDecorator

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> 
    ); 
    } 
}

정의된다!

출처

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 파일을 생성하고 생성 된 애셋에서 참조하는 것을 피하는 것이 었습니다. 아마도 이것은 미래에 세련 될 것이며'style' 콘텐츠는 어떻게 든 지어진 자산 'JS와 번들 될 것입니다. –

안녕하세요 @ AlexanderStaroselsky "만남의 유일한 마술사"는 무엇을 의미합니까? 이 대답의 샘플은 오직''styles''''을 가지고 있습니다. –

@MatthiasMax 원래 목표는 별도의 스타일 시트가 필요 없도록'styles' 속성을 사용하여 주입 된 스타일의 라인을 따라 무언가를 사용하는 것이 었습니다. 질의 응답 시간 이후로 주입 된 스타일을 포함한 많은 중요한 업데이트가 StencilJS에있었습니다. 더 이상 문제가되지 않습니다. 감사합니다! –

답변

관련 문제