[system] 'display: flex' not working with compose

I cannot get flexbox to work with compose from material-ui’s system portion of the library. I even tried editing the demo made with the codesandbox to no avail.

I am not sure what I am doing wrong. justifyContent works, its just the display:flex. If I add flexbox via a class name, it acts as it should which means it is not how the component is being set up.

This is my code for a quick reference and in case my changes to the sandbox had not been retained. The sandbox I edited is here.

import React from "react";
import { styled } from "@material-ui/core/styles";
import { compose, flexbox, spacing, palette } from "@material-ui/system";

const Box = styled("div")(
  compose(
    flexbox,
    spacing,
    palette
  )
);

export default function JSS() {
  return (
    <Box
      display="flex"
      justifyContent="center"
      color="white"
      bgcolor="palevioletred"
      p={1}
    >
      JSS
    </Box>
  );
}

Thank you in advance

[oliviertassinari]

Thanks for the feedback!

[AveryTheDev]

Yes in the link I included

After looking through the docs I noticed that there was a display portion of system. There is no mention of that being needed in the flexbox portion of the the documentation.

I suggest adding that to avoid confusion as it appears that only { flexbox } needs to be imported from ‘material-ui/system’ when in reality it should be

import {display, flexbox} from 'material-ui/system'