reactjs - Specificera vissa HTML-taggar som generisk styled-komponent i TypeScript

Jag försökte bygga en generisk emotion-stylad komponent som rubrik i React med TypeScript. Målet är att dynamiskt skicka HTML-taggen som props, vilket endast ska vara en "h1" | "h2" | "h3" | "h4" | "h5" | "h6". Det här är min kod:

interface Props extends StyledProps {
    tag: keyof JSX.IntrinsicElements; // TODO specify only heading
}

export const CenteredHeadline: React.FC<Props> = ({
    tag,
    fontSizeMobile,
    fontSizeDesktop,
    children,
}) => {
    const StyledComponent = styled(tag)<StyledProps>`
        label: CenteredHeadline;
        color: #3f4846;
        font-size: ${(props) => (props.fontSizeMobile ? 'props.fontSizeMobile' : '34px')};
        text-align: center;

        @media screen and (min-width: 768px) {
            font-size: ${(props) => (props.fontSizeDesktop ? 'props.fontSizeDesktop' : '40px')};
            max-width: 750px;
        }
    `;
    return (
        <StyledComponent fontSizeMobile={fontSizeMobile} fontSizeDesktop={fontSizeDesktop}>
            {children}
        </StyledComponent>
    );
};

Koden ovan fungerar bra hittills, men tagg-egenskapen är inte begränsad till att bara vara en rubrik.

Jag försökte något liknande detta

interface Props extends StyledProps {
    tag:
        | JSX.IntrinsicElements['h1']
        | JSX.IntrinsicElements['h2']
        | JSX.IntrinsicElements['h3']
        | JSX.IntrinsicElements['h4']
        | JSX.IntrinsicElements['h5']
        | JSX.IntrinsicElements['h6']; // TODO specify only heading
}

vilket ledde till en massa fel i min emotionprop (tagg).

Så frågan är mer typescript-relaterad, antar jag:

Finns det ett sätt att specificera vissa nycklar i keyof something, JSX.IntrinsicElements i mitt fall?

Tack för all hjälp!

UPPDATERING

Jag hittar ett sätt att specificera tangenterna:

type Tag = Pick<JSX.IntrinsicElements, "h1" | "h2">

 const StyledComponent = styled<Tag>(tag)<StyledProps>`
  ...

Men jag kommer att få ett fel i min stilade komponent som säger

Typen 'Tag' uppfyller inte begränsningen 'keyof IntrinsicElements'

Så jag antar att problemet nu skickas till känslan.

Jag är fortfarande glad för alla tips här. =)

Svar #1

Varför inte helt enkelt: type Tag="h1" | "h2" | "h3" | ....