Skip to content

Instantly share code, notes, and snippets.

@giovanniantonaccio
Created June 16, 2020 03:00
Show Gist options
  • Save giovanniantonaccio/cbc0bb812b2071168051370e257e021f to your computer and use it in GitHub Desktop.
Save giovanniantonaccio/cbc0bb812b2071168051370e257e021f to your computer and use it in GitHub Desktop.
Snippets to create React Components with Material UI
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment