I was wondering if using Styled Components with ThemeProvider passing down the theme wouldn't bring performance issues, since you would need to use hundreds or even thousands of arrow functions to access theme that way.

My real question is: which approach is better and why?

Option 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};
`;

Option 2

import { theme } from './theme';

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