Me preguntaba si el uso de componentes con estilo con ThemeProvider pasando el tema no traería problemas de rendimiento, ya que necesitaría usar cientos o incluso miles de funciones de flecha para acceder al tema de esa manera.

Mi verdadera pregunta es: ¿qué enfoque es mejor y por qué?

Opción 1

 const InputHelpText = styled.p` font-size: ${(props) => props.theme.text.s}; color: ${(props) => props.theme.colors.secondaryLight}; margin-top: ${(props) => props.theme.spacing.xs}; `;

opcion 2

 import { theme } from './theme'; const InputHelpText = styled.p` font-size: ${theme.text.s}; color: ${theme.colors.secondaryLight}; margin-top: ${theme.spacing.xs}; `;