How to properly fork an Ionic Stencil Component

Question

I would like to fork ion-datetime in order to customize colums and position on the screen and use it in my ionic app.

I have no idea how to do that and overall solutions seems to be ugly copy pastings.

Is there any proper solution out there ?

Answer 1

There's no official way/API for forking a single component of Ionic. However it's still possible to adjust their components to your liking. You can use the 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 component (which gives you more control over how to render the columns).

When it comes to styling, it's not as straightforward because you can't use CSS to overwrite any of the internal component styles. Due to the nature of Shadow DOM, only the exposed CSS custom properties allow you to modify the component's look (unless the elements live in the Light DOM).

But it's still possible to modify the styles, it just needs to be through JavaScript. You can create your own wrapper component around ion-datetime, pick up a reference to it and go directly into its shadowRoot to hack around with the styles.

@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} />;
  }
}

Be aware that these kinds of modifications might break when the Ionic team updates the component and changes some internal implementation detail that you were relying on.