Question

我想分叉ion-datetime以便自定义列和在屏幕上的位置，并在我的离子应用程序中使用它。

我不知道该怎么做，整体解决方案似乎是丑陋的复制粘贴。

那里有合适的解决方案吗？

Answer 1

没有正式的方法/ API分叉Ionic的单个组件。但是，仍然可以根据自己的喜好调整其组件。您可以使用pickerFormat属性来调整列。如果这还不足以满足您的需求，则您可以使用ion-picker组件构建自己的日期时间选择器（它使您可以更好地控制如何呈现列）。

在样式方面，它并不是那么简单，因为您不能使用CSS来覆盖任何内部组件样式。由于Shadow DOM的性质，只有暴露的CSS custom properties允许您修改组件的外观（除非元素存在于Light DOM中）。

但是仍然可以修改样式，只需要通过JavaScript。您可以在ion-datetime周围创建自己的包装器组件，选择对它的引用，然后直接进入其shadowRoot来修改样式。

@Component({ tag: 'my-datetime' })
export class MyDatetime {
  setStyles = (el?: HTMLIonDatetimeElement) => {
    if (!el || !el.shadowRoot) {
      return;
    }

    el.shadowRoot.querySelector('.datetime-text').style.fontWeight = 600;
  }

  render() {
    return <ion-datetime ref={this.setStyles} />;
  }
}

请注意，当Ionic团队更新组件并更改您所依赖的一些内部实现细节时，此类修改可能会中断。

如何正确分叉离子模板组件

1 个答案: