I have a custom text component that takes a mandatory variant and an optional style props:

<HeaderText variant="h1" style={{ color: 'red' }}>Test</HeaderText>

Then I generate the CSS of the styled component based on the variant but I also want to somehow apply the custom optional styling that might be passed as a prop. I imagine I'd need to spread it somewhere, but I couldn't figure out where.

import React, { FunctionComponent } from 'react';
import { TextProps } from 'react-native';
import styled from 'styled-components';

import colors from '../colors';
import fonts from '../fonts';

type Props = {
    variant?: 'h1' | 'h2' | 'h3';
} & TextProps;

const HeaderText: FunctionComponent<Props> = ({ variant = 'h1', style, ...rest }) => {
    return <StyledText variant={variant} {...rest} />;
};

const StyledText = styled.Text`
    fontFamily: ${(props: any) => styles[props.variant].fontFamily};
    color: ${(props: any) => styles[props.variant].color};
    fontWeight: ${(props: any) => styles[props.variant].fontWeight};
    fontSize: ${(props: any) => styles[props.variant].fontSize};
    lineHeight: ${(props: any) => styles[props.variant].lineHeight};
`;

const styles = {
    h1: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: '36px',
        lineHeight: '40px',
    },
    h2: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: '30px',
        lineHeight: '39px',
    },
    h3: {
        fontFamily: fonts.GUARDIAN_EGYP_LIGHT,
        color: colors.gray900,
        fontWeight: '300',
        fontSize: '24px',
        lineHeight: '34px',
    }
};

export default HeaderText;