Snippets to create React Components with Material UI

vscode-material-ui-snippets

{
  "styles": {
    "prefix": "muistyles",
    "body": [
      "import { Theme, makeStyles } from '@material-ui/core/styles';",
      "",
      "export const useStyles = makeStyles((theme: Theme) => ({",
      "  container: {},",
      "}));",
      ""
    ],
    "description": "Create MaterialUI styles file"
	},
	
	"stylesNoTheme": {
    "prefix": "muistylesnotheme",
    "body": [
      "import { makeStyles } from '@material-ui/core/styles';",
      "",
      "export const useStyles = makeStyles({",
      "  container: {},",
      "});",
      ""
    ],
    "description": "Create MaterialUI styles file"
  },

  "componentFunctionalTypescript": {
    "prefix": "muicomponent",
    "body": [
      "import React from 'react';",
      "",
      "// import { useStyles } from './styles';",
      "",
      "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}: React.FC = () => {",
			"  // const classes = useStyles();",
			"",
			"  return <div />;",
      "}",
      "",
      "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};"
    ],
    "description": "Create ReactJS Material UI Functional Component Typescript"
	},
	
	"componentFunctionalTypescriptWithTypes": {
    "prefix": "muicomponenttypes",
    "body": [
      "import React from 'react';",
      "",
      "import { ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}Props } from './types';",
      "// import { useStyles } from './styles';",
      "",
      "const ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}: React.FC<${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}Props> = () => {",
			"  // const classes = useStyles();",
			"",
			"  return <div />;",
      "}",
      "",
      "export default ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}};"
    ],
    "description": "Create ReactJS Material UI Functional Component Typescript With Types"
	},

	"componentTypes": {
    "prefix": "muitypes",
    "body": [
      "export interface ${1:${TM_DIRECTORY/^.*(\\/|\\\\)([^(\\/|\\\\)]+)$/$2/}}Props {",
      "}",
      "",
    ],
    "description": "Create ReactJS Material UI Functional Component Typescript Types"
  }	
}