Tengo un componente de texto personalizado que toma una variante obligatoria y accesorios de estilo opcionales:

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

Luego genero el CSS del componente con estilo en función de la variante, pero también quiero aplicar de alguna manera el estilo opcional personalizado que podría pasar como accesorio. Me imagino que necesitaría esparcirlo en algún lugar, pero no pude averiguar dónde.

 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;