Combining arrow functions in styled-components

Instead of using many arrow functions to extract the theme in your styled-components, you can group them and do them all in one block.

const Button = styled.button`
  box-shadow: ${({ theme }) => theme.boxShadows.medium};
  color: ${({ theme }) => theme.colors.white};
  font-weight: ${({ theme }) => theme.fontWeights.semibold};
  margin: 0;
`;

const Button = styled.button`
  ${({ theme }) => `
    box-shadow: ${theme.boxShadows.medium};
    color: ${theme.colors.white};
    font-weight: ${theme.fontWeights.semibold};
  `}
  margin: 0;
`;

There is more to learn

Get free previews of my upcoming course materials and other bonus content to help you work smarter. I share tips straight to your inbox once a week. You can read previous mails in the newsletter archive.

Cannot show form because cookie consent was not given.