problem with style ordering when using together with styled-components

[sibelius]

import { Flex } from 'rebass';

const Layout = styled(Flex)`
  margin-top: 50px;
`;

these are the styled generated

the rebass styles have more preference than the styled-components, how can we modify it?

I've tried to use like this import { Text, Flex } from 'rebass/styled-components';

but it breaks when using with @material-ui theme

TypeError: breakpoints.map is not a function

node_modules/@styled-system/css/dist/index.esm.js:138

 var mediaQueries = [null].concat(breakpoints.map(function (n) {
      | ^  139 |     return "@media screen and (min-width: " + n + ")";
  140 |   }));

One way to solve this is like this:

const Layout = styled(Flex)`
   && {
     margin-top: 50px;
  }
`;