How to use the @material-ui/system.compose function in @material-ui/system

import { spacing, palette, typography, compose } from '@material-ui/system';
import { createMuiTheme } from '@material-ui/core/styles';
import { styleFunction } from '@material-ui/core/Box';
import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles';
import styledComponents, {
  ThemeProvider as StyledComponentsThemeProvider,
} from 'styled-components';

const suite = new Benchmark.Suite('system', {
  onError: event => {
    console.log(event.target.error);
  },
});
Benchmark.options.minSamples = 100;

const materialSystem = compose(
  palette,
  spacing,
  typography,
);
const styledSystem = compose2(color, space, fontFamily, fontSize);

const BoxStyles = styled('div')(styleFunction);
const BoxStyleComponents = styledComponents('div')(styleFunction);
const NakedStyleComponents = styledComponents('div')(spacing);
const BoxEmotion = styledEmotion('div')(styleFunction);

const BoxMaterialSystem = styledComponents('div')(materialSystem);
const BoxStyledSystem = styledComponents('div')(styledSystem);

const materialSystemTheme = createMuiTheme();

import PropTypes from 'prop-types';
import { styled } from '@material-ui/styles';
import cssSystem from 'utils/cssSystem';
import {
  compose,
  typography,
  spacing,
  display,
  palette,
  positions,
  sizing,
} from '@material-ui/system';

export const styleFunction = compose(
  display,
  spacing,
  typography,
  palette,
  positions,
  sizing,
  cssSystem
);

const Image = styled('img')(styleFunction);

Image.propTypes = {
  src: PropTypes.string.isRequired,
};
Image.defaultProps = {
  display: 'block',

borders,
  compose,
  display,
  flexbox,
  palette,
  positions,
  shadows,
  sizing,
  spacing,
  typography,
  css,
} from '@material-ui/system';
import styled from '../styles/styled';

export const styleFunction = css(
  compose(
    borders,
    display,
    flexbox,
    positions,
    palette,
    shadows,
    sizing,
    spacing,
    typography,
  ),
);

/**
 * @ignore - do not document.
 */
const Box = styled('div')(styleFunction, { name: 'MuiBox' });

import Typography from '@material-ui/core/Typography';
import styled from '@material-ui/styles/styled';
import cssSystem, { lineHeight, letterSpacing } from 'helpers/cssSystem';
import {
  compose,
  typography,
  spacing,
  display,
  palette,
  positions,
  sizing,
} from '@material-ui/system';

export const styleFunction = compose(
  display,
  sizing,
  spacing,
  typography,
  palette,
  positions,
  lineHeight,
  letterSpacing,
  cssSystem,
);

const Text = styled(Typography)(styleFunction);

Text.brand = {
  color: 'primary.main',
  fontSize: 28,

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import NoSsr from '@material-ui/core/NoSsr';
import { createMuiTheme } from '@material-ui/core/styles';
import { compose, spacing, palette, css } from '@material-ui/system';

const Box = styled.div`
  ${css(
    compose(
      spacing,
      palette,
    ),
  )}
`;

const theme = createMuiTheme();

function CssProp() {
  return (
    
      
        
          CssProp

prop: 'visibility',
  cssProperty: 'visibility',
});

export const lineHeight = style({
  prop: 'lineHeight',
  cssProperty: 'lineHeight',
});

export const letterSpacing = style({
  prop: 'letterSpacing',
  cssProperty: 'letterSpacing',
});

export const allCssSystem = css(
  compose(
    borders,
    display,
    flexbox,
    positions,
    palette,
    shadows,
    sizing,
    spacing,
    typography,
    flex,
    flexGrow,
    flexShrink,
    flexBasis,
    transform,
    transition,
    transformOrigin,

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

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

export default function JSS() {
  return (
    
      JSS
    
  );
}

sizing,
    spacing,
    typography,
    flex,
    flexGrow,
    flexShrink,
    flexBasis,
    transform,
    transition,
    transformOrigin,
    overflow,
    visibility,
  ),
);

export default compose(
  flex,
  flexGrow,
  flexShrink,
  flexBasis,
  transform,
  transition,
  overflow,
  visibility,
  transformOrigin,
);

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

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

export default function JSS() {
  return (
    
      JSS
    
  );
}

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import NoSsr from '@material-ui/core/NoSsr';
import { createMuiTheme } from '@material-ui/core/styles';
import { compose, spacing, palette, css } from '@material-ui/system';

const Box = styled.div`
  ${css(
    compose(
      spacing,
      palette,
    ),
  )}
`;

const theme = createMuiTheme();

export default function CssProp() {
  return (
    
      
        
          CssProp