如何在Stenciljs组件中使用Flatpickr ?

Question

Flatpickr输入字段没有显示在适当的css模板组件中。我在一个新创建的(使用模板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将CSS包含在HTMLhead或任何全局CSS文件中。

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