Example usage of styled components with theme providers

styledComponentExample.js

// First example: using a callback for every line to access theme
export const PretendContainer1 = styled.div`
  background-color: ${({ theme }) => theme.colors.primary};
  color: ${({ theme }) => theme.colors.secondary};
  padding: ${({ theme }) => theme.spacing.medium};
  margin-bottom: ${({ theme }) => theme.spacing.small};
`;

// Second example: using a single call back that returns `css` for
// a single reusable theme prop
export const PretendContainer2 = styled.div`
  ${({ theme }) => css`
    background-color: ${theme.colors.primary};
    color: ${theme.colors.secondary};
    padding: ${theme.spacing.medium};
    margin-bottom: ${theme.spacing.small};
  `};
`;

Is the first or second example better for a component that uses a theme prop more than a couple times. Are there any inefficiencies to having several callbacks (First example) rather than a single (Second example), and are there any differences to using a callback that returns css that should be known?