score:1

i don't believe there's anything wrong with either approach. i've used what you're doing in your first example a lot in a large react app, and had no issue (yet).

that being said, your second example is perfectly valid. you don't even need the css helper:

const test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
`;

in general, i use the css helper to create abstracted/sharable css chunks:

const fontsize = css`
  font-size: ${({ small, large, theme }) => {
    if (small) return `${theme.small}rem`;
    if (large) return `${theme.large}rem`;
    return `${theme.normal}rem`;
  }};
`;


const test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
  ${fontsize}
`;

and then:

<test small>hello world</test>

Related Query

More Query from same tag