文章/答案/技术大牛

发布

问StencilJS组件样式
EN

Stack Overflow用户

提问于 2017-10-09 04:46:40

回答 1查看 4K关注 0票数 1

使用styles选项/ ComponentDecorator属性的正确方法是什么？将styles属性与存储库中的默认my-name组件一起使用，模版-元件-启动器似乎不会影响各个组件的样式，也不会生成类似于<head>中的<style>标记的内容。styles打算如何工作？还是还没有实施呢？如果目标是避免需要加载单独的CSS资产，但提供组件的样式，那么styles是正确的选择还是需要使用其他属性(如host )？

下面是从模具组件-启动器]1生成的示例组件，其中stylesUrl @Component属性替换为styles属性，并设置了font-size属性。在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[];
}

感谢您能提供的任何帮助！

web-component

stenciljs

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-12 20:18:01

我刚刚尝试了最新的版本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>;
  }
}

(EDITed显示自0.0.613以来的演变)

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46639005

复制

相似问题

问StencilJS组件样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问StencilJS组件样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问StencilJS组件样式
EN