如何在Stenciljs组件中使用Flatpickr？
如何在Stenciljs组件中使用Flatpickr？
提问于 2021-08-20 15:48:43
没有在模板组件中显示具有正确css的Flatpickr输入字段。我在一个新创建的应用程序(使用模具cli)中添加了平面选择日期输入字段。没有其他设置或信任被改变。
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>
)
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-20 19:54:29
我猜问题在于样式设计，因为你发布的代码看起来是正确的。
默认情况下，Flatpickr会将日历附加到body元素，并且由于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.在全局范围内包含head。包含在HTML或任何全局head文件中。
3.禁用ShadowDOM Set shadow: false以允许my-component.css中的样式影响组件之外的元素，并在my-component.css中导入CSS (与选项1中相同)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68864873
复制相关文章
相似问题
腾讯云开发者
