How to use @material-ui/system - 10 common examples

import mapTranslations from 'docs/src/modules/utils/mapTranslations';

const req = require.context('docs/translations', false, /translations.*\.json$/);
const translations = mapTranslations(req, 'json');

function getPath(obj, path) {
  if (!path || typeof path !== 'string') {
    return null;
  }

  return path.split('.').reduce((acc, item) => (acc && acc[item] ? acc[item] : null), obj);
}

const warnOnce = {};

const getT = memoize(userLanguage => (key, options = {}) => {
  const { ignoreWarning = false } = options;
  const wordings = translations[userLanguage];

  if (!wordings) {
    console.error(`Missing language: ${userLanguage}.`);
    return '…';
  }

  const translation = getPath(wordings, key);

  if (!translation) {
    const fullKey = `${userLanguage}:${key}`;
    // No warnings in CI env
    if (!ignoreWarning && !warnOnce[fullKey] && typeof window !== 'undefined') {
      console.error(`Missing translation for ${fullKey}.`);
      warnOnce[fullKey] = true;

function interopTest() {
  const mixin = style({ prop: 'color' });
  // built-in style function
  const SystemSpacingBox = styled.div`
    ${spacing}
    ${mixin}
  `;
  ;
}

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import NoSsr from '@material-ui/core/NoSsr';
import { style, typography } from '@material-ui/system';

const variant = style({
  prop: 'variant',
  cssProperty: false,
  themeKey: 'typography',
});

// ⚠ Text is already defined in the global context:
// https://developer.mozilla.org/en-US/docs/Web/API/Text/Text.
const Text = styled.span`
  font-family: Helvetica;
  ${variant}
  ${typography}
`;

const theme = {
  typography: {
    h1: {

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import NoSsr from '@material-ui/core/NoSsr';
import { PropsFor, style, typography, TypographyProps } from '@material-ui/system';

const variant = style({
  prop: 'variant',
  cssProperty: false,
  themeKey: 'typography',
});

// ⚠ Text is already defined in the global context:
// https://developer.mozilla.org/en-US/docs/Web/API/Text/Text.
const Text = styled.span & TypographyProps>`
  font-family: Helvetica;
  ${variant}
  ${typography}
`;

const theme = {
  typography: {
    h1: {

function cssRequiredTest() {
  function styleRequiredFunction(props: { color: string }) {
    return {};
  }

  const style = css(styleRequiredFunction);
  style({
    color: 'red',
    css: {}, // $ExpectError
  });
  style({ css: { color: 'red' } }); // $ExpectError
  style({ color: 'blue', css: { color: 'red' } });
}

function cssTest() {
  function styleFunction(props: { color?: string; spacing?: number; theme?: object }) {
    return {};
  }

  const wideOrNarrowStyleFunction = css(styleFunction);

  // narrow
  wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 } });
  // wide, undesire: `css` is required, marking it as optional breaks system/basics/#css-property
  wideOrNarrowStyleFunction({ theme: {}, color: 'blue', spacing: 2, css: {} });
  // wide and narrow
  wideOrNarrowStyleFunction({ theme: {}, css: { color: 'blue', spacing: 2 }, color: 'red' });
}

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();

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

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

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

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

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

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

export const overflow = style({
  prop: 'overflow',

import display from '@material-ui/system/display';
import flexbox from '@material-ui/system/flexbox';
import palette from '@material-ui/system/palette';
import positions from '@material-ui/system/positions';
import shadows from '@material-ui/system/shadows';
import sizing from '@material-ui/system/sizing';
import spacing from '@material-ui/system/spacing';
import typography from '@material-ui/system/typography';
import css from '@material-ui/system/css';

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

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

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

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

export const transform = style({
  prop: 'transform',

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

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

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

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

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

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

export const visibility = style({
  prop: 'visibility',