5

我正在尝试从包含 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;
}

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

4

3 回答 3

3

您可以为此使用css 变量。查看以下代码示例：

索引.html

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

我的组件.css

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

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

于 2019-04-26T13:53:52.457 回答
1

您的组件有一个“Shadow DOM”，其目的是封装所有内容，包括单独 DOM 中的样式，因此它的存在几乎可以防止您覆盖它的样式。

以前有一些“阴影穿透”CSS 指令，例如/deep/and ::shadow，但它们已被弃用并且不再起作用。

所以这就是它应该是的样子。

现在寻找解决方法：

  • 创建一个共享的 css 文件并将其包含在您的组件和应用程序中 - 或
  • 使用 shadowRoot 属性在主机应用程序中使用 javascript 设置样式：
var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';
于 2019-01-18T15:02:40.897 回答
1

您应该能够:host在样式表中使用 psuedo 选择器来应用主机级别样式：

:host {
    style: value
}

你可以很容易地@stencil.sass为你的样式表引入，链接在这里：https ://github.com/ionic-team/stencil-sass/blob/master/readme.md

这将为您在模板中的样式提供更强大的功能。

编辑：

我误解了，现在看到您想在组件之外进行操作。您可以<slot />在 Web 组件中提供一个元素，并从 Web 组件 DOM 外部添加特定样式的元素。链接在这里：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

于 2019-01-26T01:13:44.627 回答