时间戳

首页 > 解决方案 > StencilJS 组件可以使用外部主题吗？

sass - StencilJS 组件可以使用外部主题吗？

问题描述

我正在尝试使用 StencilJS 为我正在处理的多个项目创建可重用的 Web 组件。但是我很难将主要应用程序的颜色主题继承到我的 Stencil 按钮组件。示例：我想为我的应用程序使用不同的主要和次要颜色，这些应用程序适用于我的 Stencil 组件，例如原色按钮。但我该如何做到这一点？我正在使用 sass 样式，并在我的 Stencil 项目中使用我的主题本地设置了主变量。但我不知道如何在编译后导入外部 sass/css 文件。

<my-button color="primary">This is a primary button</my-button>

标签： sassweb-componentstenciljs

解决方案

一种选择是在定义组件时关闭 Shadow DOM。这将允许您的 Web 组件从正在使用该组件的应用程序继承 CSS。

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

推荐阅读