1

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

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

2 回答 2

6

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

@Component({
  tag: 'shadow-component',
  styleUrl: 'shadow-component.css',
  shadow: false
})
于 2018-10-06T00:25:36.900 回答
4

在样式文档的底部有一个关于如何使用 CSS 变量的部分：

在这个例子中，我们定义了一个名为的 CSS 变量--app-primary-color，它被设置为 color #488aff。此示例中的:root选择器是一个 CSS 伪选择器，它在项目的根元素（通常是<html>）上定义变量，以便可以在整个应用程序中使用该变量。

因此，如果您有这样的按钮组件：

@Component({ tag: 'my-button', styleUrl: 'button.css' })
export class Button {
  render() {
    return <div class="button"><slot /></div>;
  }
}

以及以下button.css内容：

.button {
  background: var(--primary-color, tomato);
  color: var(--light-color, white);

  display: block;
  padding: 1em 2em;
  border-radius: 0.2em;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
}

然后，您可以通过在 CSS 中的某处设置变量来覆盖所有按钮颜色：

:root {
  --primary-color: mediumseagreen;
}

CSS 变量也可以使用 Javascript 设置，它们甚至可以由 Stencil 为旧版浏览器填充。

JSFiddle 示例：http: //jsfiddle.net/5fv9r6e1/

顺便说一句，在您的组件装饰器中，您还可以设置shadow: true启用 Shadow DOM，然后您可以使用:host选择器并且在此示例中不需要包装 div：

@Component({ tag: 'my-button', styleUrl: 'button.css', shadow: true })
export class Button {
  render() {
    return <slot />;
  }
}

CSS：

:host {
  background: var(--primary-color, tomato);
  color: var(--light-color, white);

  display: block;
  padding: 1em 2em;
  border-radius: 0.2em;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
}

Ionic 4 经常使用这个概念，因此可能值得看看他们的 Stencil 组件：https ://github.com/ionic-team/ionic/tree/master/core/src/components

于 2018-10-04T21:19:37.137 回答