Migration - grid-emotion

grid-emotion has been deprecated for over a year now, the new project is reflexbox. In order to upgrade to the newest version of emotion we need to migrate off of grid-emotion.

To migrate, replace the imported <Flex> and <Box> components with a styled component using emotion.


Replace the components with below and then remove the necessary props and move to the styled component.


const Flex = styled('div')`
  display: flex;


const Box = styled('div')`


If you are modifying a component that is exported, be sure to grep through the codebase for the component to make sure that it is not being rendererd with additional props specific to grid-emotion. Examples are the <Panel> components.

margin and padding

Margin props begin with m and padding with p. The examples below will be using margin as an example

old (grid-emotion)new (css/emotion/styled)
m={2}margin: ${space(2);
mx={2}margin-left: ${space(2); margin-right: ${space(2)};
my={2}margin-top: ${space(2); margin-bottom: ${space(2)};
ml={2}margin-left: ${space(2);
mr={2}margin-right: ${space(2);
mt={2}margin-top: ${space(2);
mb={2}margin-bottom: ${space(2);


These are flexbox props

old (grid-emotion)new (css/emotion/styled)
align="center"align-items: center;
justify="center"justify-content: center;
direction="column"flex-direction: column;
wrap="wrap"flex-wrap: wrap;

width (as an array)

TBD - for now just ignore the import statement of grid-emotion e.g. // eslint-disable-line no-restricted-imports

You can edit this page on GitHub.