<div class="MuiXxx-xxx-n makeStyles-xxx-n">...</div>

yarn add @material-ui/style
# または、
yarn add @material-ui/core

import {create} from 'jss';
import {
  StylesProvider,
  jssPreset
} from '@material-ui/core/styles';
import rtl from 'jss-rtl';

const jss = create({
  plugins: [
    // 上記の7つのプラグインがほしい場合、
    // コメントアウト
    // ...jssPreset().plugins,
    rtl()
  ]
});

export default () => {
  return (
    
      {/* ... */}
    
  );
};

const propInjector = withStyles(
  style,
  options
);

const styles = {
  // root はクラスキー
  root: {
    // CSSProperties
    color: 'orange',

    // CreateCSSProperties
    '&:hover': {
      background: 'blue'
    },
    background: props =>
      props.background
  }
};

const styles = {
  root: props => ({
    color: 'orange',
    '&:hover': {
      background: 'blue'
    },
    background: props.background
  })
};

const styles = theme => {
  root: props => ({
    background: props.background
  });
};

const FooWithClasses = propInjector(
  Foo
);

const classes = {
  root:
    '定義時の`classes.root` プロパティで渡さた`classes.root`'
};

Material-UI: the key `heading` provided to the classes prop is not implemented in App.
You can only override one of the following: root.

const useStyles = makeStyles(theme => {
  root: props => ({
    background: props.background
  });
});

const classes = useStyles();
/**
 * classes === {
 *   root: 'makeStyles-root-9',
 * };
 **/

styled(Button)`
  color: orange;
`;

import {createMuiTheme} from '@material-ui/core/styles';

console.log(createMuiTheme());

export default () => null;

import {
  ThemeProvider,
  createMuiTheme
} from '@material-ui/core/styles';

const theme = createMuiTheme();


  {/* ... */}
;

interface PaletteIntention {
  light?: string;
  main: string;
  dark?: string;
  contrastText?: string;
}

import {
  amber,
  blue,
  blueGrey,
  brown,
  common,
  cyan,
  deepOrange,
  deepPurple,
  green,
  grey,
  indigo,
  lightBlue,
  lightGreen,
  lime,
  orange,
  pink,
  purple,
  red,
  teal,
  yellow
} from '@material-ui/core/colors';

const theme = createMuiTheme({
  spacing: 2
});

const theme = createMuiTheme({
  spacing: factor => `${[0, 4, 8, 16, 32, 64][factor]}rem`,
});

// theme.spacing(1) === '4rem'

const breakpoints = {
  values: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920
  }
};

const zIndex = {
  mobileStepper: 1000,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500
};

import {jaJP} from '@material-ui/core/locale';

import React from 'react';
import Alert from '@material-ui/lab/Alert';
import {
  createMuiTheme,
  ThemeProvider
} from '@material-ui/core/styles';
import {jaJP} from '@material-ui/core/locale';

const theme = createMuiTheme({}, jaJP);

export default function App() {
  return (
    
       {}}
      >
        error text
      
    
  );
}

import Box from '@material-ui/core/Box';
// import {Box} from '@material-ui/core';

const breakpoints = {
  values: {
    xs: 0,
    sm: 600,
    md: 960,
    lg: 1280,
    xl: 1920
  }
};

const zIndex = {
  mobileStepper: 1000,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500
};

const zIndex = {
  mobileStepper: 1000,
  speedDial: 1050,
  appBar: 1100,
  drawer: 1200,
  modal: 1300,
  snackbar: 1400,
  tooltip: 1500
};

// 

const shadows = [
  'none',
  '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
  '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',
  '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
  '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
  '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)',
  '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
  '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
  '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
  '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
  '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px…gba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
  '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px…gba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
  '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px…gba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
  '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px…gba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
  '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px…gba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
  '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px…gba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
  '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2p…gba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
  '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2p…gba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
  '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2p…gba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
  '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2p…gba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
  '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3…gba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
  '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3…gba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
  '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3…gba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
  '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3…gba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
  '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3…gba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)'
];

// `value`は指定した値
value => {
  if (value <= 1) {
    return `${value * 100}%`;
  }

  return value;
};

const theme = createMuiTheme({
  spacing: 2
});

const typography = {
  htmlFontSize: 16,
  fontFamily:
    '"Roboto", "Helvetica", "Arial", sans-serif',
  fontSize: 14,
  fontWeightLight: 300,
  fontWeightRegular: 400,
  fontWeightMedium: 500,
  fontWeightBold: 700,
  h1: {
    fontFamily:
      '"Roboto", "Helvetica", "Arial", sans-serif',
    fontWeight: 300,
    fontSize: '6rem',
    lineHeight: 1.167,
    letterSpacing: '-0.01562em'
  },
  h2: {/* ... */},
  h3: {/* ... */},
  h4: {/* ... */},
  h5: {/* ... */},
  h6: {/* ... */},
  subtitle1: {/* ... */},
  subtitle2: {/* ... */},
  body1: {/* ... */},
  body2: {/* ... */},
  button: {/* ... */},
  caption: {/* ... */},
  overline: {/* ... */},
};

import NoSsr from '@material-ui/core/NoSsr';
// import {NoSsr} from '@material-ui/core';

import Radio from "@material-ui/core/Radio";

import Radio, {RadioProps} from "@material-ui/core/Radio";

(event: React.ChangeEvent, checked: boolean) => void;

 {
    console.log(changeEvent, checked /* === true */);
  }}
/>;

 {
    console.log(changeEvent.target.value /* === 'foo' */);
  }}
  value="foo"
/>;

;

;

<>
  
    }
  />
  
    }
  />
;

import RadioGroup from '@material-ui/core/RadioGroup';

yarn install --network-timeout 1000000000                                                                                                              
# yarn install v1.17.0
# [1/4] 🔍  Resolving packages...
# [2/4] 🚚  Fetching packages...
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...
# error An unexpected error occurred: "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.2.tgz: read ECONNRESET".
# info If you think this is a bug, please open a bug report with the information provided in "/Users/nju33/github/nju33/figma-tailwindcss/yarn-error.log".
# info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...
# info There appears to be trouble with your network connection. Retrying...