javascript - 模具 |将宿主样式应用于组件

Question

我正在尝试应用来自包含 stencilJS 组件的网站的样式……但不知道如何操作。

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

@Component({
  tag: 'menu-component',
  styleUrl: 'menu-component.css',
  shadow: true
})

export class MyComponent {

 render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p id="red">This is JSX!</p>
      </div>
    );
  }
}

组件是这样包含的:

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='https://unpkg.com/component@0.0.2/dist/mycomponent.js'></script>
<my-component></my-component>

在我的 main.css 文件中我有这样的东西:

#red{
    color: red;
}

我希望将样式应用于模板组件中的元素。这可能吗？

Answer 1

您可以使用 css variables为了这。 查看以下代码示例:

index.html

<my-component style="--text-color:red;"></my-component>

my-component.css

#red {
    color: var(--text-color, black);
}

在组件的样式中，您将 CSS 变量作为值分配给类的文本颜色 [id="red"] .在您的应用程序中，您现在可以通过设置变量的值来更改颜色。