Question

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

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

Answer 1

Styling文档的底部有一个有关如何使用CSS变量的部分：

在此示例中，我们定义了一个名为--app-primary-color的CSS变量，该变量设置为颜色#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进行填充。

JSF中间示例：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经常使用此概念，因此值得一看其模板组件：https://github.com/ionic-team/ionic/tree/master/core/src/components

Answer 2

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

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

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

2 个答案: