时间戳

首页 > 解决方案 > 模板JS | 将宿主样式应用于组件

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

问题描述

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

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

标签： javascriptstenciljs

解决方案

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

索引.html

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

我的组件.css

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

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

推荐阅读