Question

使用styles的{{1}}选项/属性的正确方法是什么？将ComponentDecorator属性与存储库stencil-component-starter中的默认styles组件一起使用似乎不会影响相应组件的样式，也不会生成类似my-name标记的内容。 <style>。 <head>如何运作？还是尚未实施？如果目标是避免需要加载单独的CSS资产，但为组件提供样式，styles是正确的选择，还是需要styles之类的其他属性使用

以下是从stencil-component-starter] 1生成的示例组件，其中host @Component属性已替换为stylesUrl属性并设置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

感谢您提供任何帮助！

Answer 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以来的演变）

StencilJS组件样式

1 个答案: