Missing flexbox styles on <Flex> component

I really enjoy working with Rebass, thanks for all the effort you’ve put in this project!

After upgrading to Styled Components v4 and Rebass v3 it seems like every prop on every component works except the props specific to the <Flex> (eg. display: flex; alignItems="center") component.

Example code

    <Flex px={3} py={4} alignItems="center">
      <Box px={3} py={5} color="white" bg="blue">
        <Heading as="h1" fontSize={[4, 5, 6]}>
          Hello, Rebass
        </Heading>
      </Box>
      <Box px={3} py={5} color="white" bg="blue">
        <Heading as="h1" fontSize={[4, 5, 6]}>
          Hello, Rebass
        </Heading>
      </Box>
    </Flex>

Inspector

I’m using the Gatsby Starter Default v2 and added Rebass and Styled Components to it. I’ve been trying to get it to work but without any luck.

Debugging steps taken

• Updated all packages to latest versions
• Removed and reinstalled node modules
• Removed cache (browser and Gatsby)
• Removed babel-plugin-styled-components

Thanks in advance!

[BartvdWaerden]

@jxnblk I’ve tested it, and everything seems to be working as it should right now!

I think you can close this issue, thanks for your fast respons and keep making awesome stuff!

[BartvdWaerden]

Found a solution while checking the deployment logs in Netlify.

Netlify installs the dependencies using Yarn (yarn install). Locally I was using NPM (npm install). When I switched to Yarn my problem was solved. Not sure why though…