1

styles使用选项/属性的正确方法是ComponentDecorator什么？将属性与存储库stencil-component-starterstyles中的默认组件一起使用似乎不会影响相应组件的样式，也不会在. 打算如何工作？还是尚未实施？如果目标是避免需要加载单独的 CSS 资产，但为组件提供样式，那将是正确的选择，还是需要使用其他属性？my-name<style><head>stylesstyleshost

下面是从 stencil-component-starter] 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[];
}

感谢您提供任何帮助！

4

1 回答 1

1

我刚刚尝试了最新版本 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-12T20:18:01.017 回答