Cleanest syntax when accessing many props & theme values?

[adamerose]

EDIT- Oops sorry I meant to create this on styled-components/styled-components not styled-components-website... doesn't look like I have the ability to delete or move it

---

I've been experimenting with different ways to use props and themes in styled-components and came up with these 3 variations:

https://codesandbox.io/s/styled-components-forked-ntfu3?file=/Content.js

const Text1 = styled.div`
  border: 1px solid ${({ theme }) => theme.border};
  color: ${({ theme }) => theme.text};
  background-color: ${({ theme }) => theme.background};
`;

const Text2 = styled.div`
  ${({ theme, props }) => css`
    border: 1px solid ${theme.border};
    color: ${theme.text};
    background-color: ${theme.background};
  `};
`;

const Text3 = styled.div(
  ({ theme, props }) => `
    border: 1px solid ${theme.border};
    color: ${theme.text};
    background-color: ${theme.background};
  `
);

1. This is what's shown in most of the docs. I find it unreadable and that's why I went looking for variations with less boilerplate
2. This is more readable but has nested template literals which I dislike
3. This seems the cleanest to me

So I'm leaning towards 3. Can anyone comment on more pros/cons of each or other variations I missed?

I also prefer this syntax and defining my themes as simple nested JS objects accessed with dot notation, rather than the syntax of styled-theming which seems to use more magic strings and makes refactoring harder.