How to style unexposed components

Ionic Framework
1

Only a small fraction of ionic components are exposed as parts for restyling, or have relevant css variables.

How do you style components that are not exposed as parts? Is there even a way, or are we stuck with ionic default looks?

2

Don’t be stuck yet, mikulashrubes1! Shadow DOM can be tricky, but some creative selectors and maybe a touch of global CSS can help. Have you tried that approach?

3
1 Like
4

Not sure what you mean by creative selectors?

For example, trying to restyle ion-datetime header. I managed to get somewhere with:

const ref = useRef(null);

useEffect(() => {
        const shadowDom = (ref.current as any)?.shadowRoot;
        const shadowHeader = shadowDom?.querySelector('.calendar-header');
        if (shadowHeader) {
            shadowHeader.style.display = 'none';
        }
    }, [ref.current]);

But it’s still impractical, because I have to hide the whole component before this re-render takes place.