如何在 Stenciljs 组件中使用 Flatpickr？

Question

Flatpickr 输入字段未在模板组件中正确显示 css。我在新创建的（使用 stencil cli）应用程序中添加了 flatpickr 日期输入字段。没有更改其他设置或配置。

import { Component, h } from '@stencil/core';
import flatpickr from 'flatpickr';


@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {

  private element: HTMLInputElement;


  componentDidLoad() {
    
    flatpickr(this.element, {
      
    });
  }

  render() {
    return (
      <div>
        <input ref={el => this.element = el} type="text" id="flatpickr" />
      </div>
    )
  }
}

Answer 1

我猜问题出在样式上，因为您发布的代码看起来是正确的。

Flatpickr 默认将日历附加到 body 元素，并且由于 CSS 在启用 ShadowDOM 时被封装 (shadow: true) my-component.css 中的样式不会影响它。

我看到三个选项：

1.附加到不同的元素

您可以为日历（您的组件或其中的任何元素）设置不同的父级

import { Component, Element, h } from '@stencil/core';
// ...
export class MyComponent {
  @Element() el: HTMLElement;

  private element: HTMLInputElement;

  componentDidLoad() {
    flatpickr(this.element, {
      appendTo: this.el,
    });
  }

  render() {
    return (
      <div>
        <input ref={el => this.element = el} type="text" id="flatpickr" />
      </div>
    )
  }
}

并导入 CSS (my-component.css) 中的样式：

@import '~flatpickr/dist/flatpickr.min.css';

2。全局包含 Flatpickr CSS。 在您的 HTML head 或任何全局 CSS 文件中包含 CSS。

3。禁用 ShadowDOM 设置 shadow: false 以允许 my-component.css 中的样式影响组件外部的元素，并在 my-component.css 中导入 CSS（与选项 1 相同）。

如何在 Stenciljs 组件中使用 Flatpickr？

How to use Flatpickr in Stenciljs components?

css

flatpickr

stenciljs