Best practice for RWD with low-level styled component

[mattp0123]

Low-level styled components are commonly seen in the styled-system ecosystem, like:

const Flex = styled('div', {
  display: 'flex',
})

I can feel that it has good reusability and clear name for it's purpose. However, If the responsive breakpoint comes in, it will become really messy (IMO). like:

<Flex
  css={{
    mt: 12,
    '@md': { mt: 15 },
    '@lg': { mt: 18 },
    '@xl': { mt: 21 },
  }}
>
  {content}
</Flex>

So I'm wondering what is the right situation for these components?

[thevipinmishra]

It can't get better (IMO),

Right now, it's kind of best api for RWD solution on the consumption level.