如何正确地 fork 一个 Ionic Stencil 组件

Question

我想 fork ion-datetime 以自定义屏幕上的列和位置并在我的 ionic 应用程序中使用它。

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

有什么合适的解决办法吗？

Answer 1

没有正式的 way/API 用于分叉 Ionic 的单个组件。但是，仍然可以根据您的喜好调整它们的组件。您可以使用 pickerFormat property to adjust the columns. If that's not good enough for you, you might be able to build your own datetime picker using the 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 团队更新组件并更改您所依赖的一些内部实现细节时，这些类型的修改可能会中断。

如何正确地 fork 一个 Ionic Stencil 组件

How to properly fork an Ionic Stencil Component

ionic-framework

angular

stenciljs

ionic4