{"id":21699547,"url":"https://github.com/vscodeshift/material-ui-snippets","last_synced_at":"2025-04-12T13:13:36.693Z","repository":{"id":38173371,"uuid":"236100166","full_name":"vscodeshift/material-ui-snippets","owner":"vscodeshift","description":"snippets for Material-UI","archived":false,"fork":false,"pushed_at":"2023-03-06T11:51:11.000Z","size":2541,"stargazers_count":40,"open_issues_count":12,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T13:13:33.021Z","etag":null,"topics":["material-ui","snippets","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vscodeshift.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-24T23:21:32.000Z","updated_at":"2024-11-05T00:49:14.000Z","dependencies_parsed_at":"2024-06-20T14:03:20.182Z","dependency_job_id":"234c1349-ff1f-4b25-a82f-dfff3a101a7b","html_url":"https://github.com/vscodeshift/material-ui-snippets","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vscodeshift%2Fmaterial-ui-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vscodeshift","download_url":"https://codeload.github.com/vscodeshift/material-ui-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248571863,"owners_count":21126522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-ui","snippets","vscode","vscode-extension"],"created_at":"2024-11-25T20:10:03.499Z","updated_at":"2025-04-12T13:13:36.645Z","avatar_url":"https://github.com/vscodeshift.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snippets for Material-UI\n\n![demo](/docs/snippet.gif?raw=true)\n\n[![CircleCI](https://circleci.com/gh/vscodeshift/material-ui-snippets.svg?style=svg)](https://circleci.com/gh/vscodeshift/material-ui-snippets)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.material-ui-snippets)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets)\n\n**Note:** There are two ways to insert these:\n\n- **Trigger Suggest** (\u003ckbd\u003e⌃\u003c/kbd\u003e\u003ckbd\u003eSpace\u003c/kbd\u003e on macOS) and then type in the name; or you can\n  enable the **Editor: Tab Completion** setting, then type the name of the\n  snippet and press \u003ckbd\u003eTab\u003c/kbd\u003e.\n- Execute the corresponding **editor commands** like `Material-UI: insert \u003cButton\u003e` (or even better, make keybindings for them!).\n\n**Performance Warning:** Currently, the suggestions can cause performance issues due to VSCode API limitations.\nAfter the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround\nis to either disable adding automatic imports for snippets (**Settings \u0026gt; Extensions \u0026gt; Material-UI Snippets \u0026gt; Add Completion Imports**)\nor use the commands to insert snippets instead of suggestions.\n\n# Using MUI v5?\n\nFor MUI v5 you'll need [`mui-snippets`](https://github.com/vscodeshift/mui-snippets) instead. This extension is for Material-UI v4.\n\n# Features\n\n- Works in JS/X and TSX\n- Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)\n- You can configure whether to use controlled or uncontrolled form controls in the extension settings.\n\n# Settings\n\n## Form Control Mode\n\n- controlled - inserts `value` and `onChange` properties\n- uncontrolled - inserts `defaultValue` property\n\n## Import Paths\n\n- auto - uses top level if other top level imports are found, second level otherwise\n- top level - `import { Button } from '@material-ui/core'`\n- second level - `import Button from '@material-ui/core/Button'`\n\n# Snippets\n\n\u003c!-- snippets --\u003e\n\n- [`muiAppBar`: \u0026lt;AppBar\u0026gt;](#muiappbar-appbar)\n- [`muiAppBarMenu`: \u0026lt;AppBar\u0026gt; with menu icon](#muiappbarmenu-appbar-with-menu-icon)\n- [`muiBottomNavigation`: \u0026lt;BottomNavigation\u0026gt;](#muibottomnavigation-bottomnavigation)\n- [`muiBottomNavigationAction`: \u0026lt;BottomNavigationAction\u0026gt;](#muibottomnavigationaction-bottomnavigationaction)\n- [`muiButton`: \u0026lt;Button\u0026gt;](#muibutton-button)\n- [`muiButtonGroup`: \u0026lt;ButtonGroup\u0026gt;](#muibuttongroup-buttongroup)\n- [`muiButtonGroupSize`: \u0026lt;ButtonGroup\u0026gt; with size](#muibuttongroupsize-buttongroup-with-size)\n- [`muiButtonGroupVertical`: vertical \u0026lt;ButtonGroup\u0026gt;](#muibuttongroupvertical-vertical-buttongroup)\n- [`muiButtonSize`: \u0026lt;Button\u0026gt; with size](#muibuttonsize-button-with-size)\n- [`muiButtonText`: text \u0026lt;Button\u0026gt;](#muibuttontext-text-button)\n- [`muiButtonWithIcon`: \u0026lt;Button\u0026gt; with icon and label](#muibuttonwithicon-button-with-icon-and-label)\n- [`muiCardHeader`: \u0026lt;CardHeader\u0026gt;](#muicardheader-cardheader)\n- [`muiCardMedia`: \u0026lt;CardMedia\u0026gt;](#muicardmedia-cardmedia)\n- [`muiCheckboxLabel`: \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muicheckboxlabel-checkbox-with-formcontrollabel)\n- [`muiCheckboxLabelPlacement`: \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muicheckboxlabelplacement-checkbox-with-formcontrollabel)\n- [`muiContainer`: \u0026lt;Container\u0026gt;](#muicontainer-container)\n- [`muiDialog`: \u0026lt;Dialog\u0026gt;](#muidialog-dialog)\n- [`muiDialogSimple`: \u0026lt;Dialog\u0026gt;](#muidialogsimple-dialog)\n- [`muiDrawerPermanent`: permanent \u0026lt;Drawer\u0026gt;](#muidrawerpermanent-permanent-drawer)\n- [`muiDrawerPersistent`: persistent \u0026lt;Drawer\u0026gt;](#muidrawerpersistent-persistent-drawer)\n- [`muiDrawerTemporary`: temporary \u0026lt;Drawer\u0026gt;](#muidrawertemporary-temporary-drawer)\n- [`muiEndAdornment`: end \u0026lt;InputAdornment\u0026gt;](#muiendadornment-end-inputadornment)\n- [`muiExpansionPanel`: \u0026lt;ExpansionPanel\u0026gt;](#muiexpansionpanel-expansionpanel)\n- [`muiExpansionPanelControlled`: controlled \u0026lt;ExpansionPanel\u0026gt;](#muiexpansionpanelcontrolled-controlled-expansionpanel)\n- [`muiFab`: \u0026lt;Fab\u0026gt;](#muifab-fab)\n- [`muiFabExtended`: \u0026lt;Fab variant=\"extended\"\u0026gt;](#muifabextended-fab-variantextended)\n- [`muiFormControl`: \u0026lt;FormControl\u0026gt;](#muiformcontrol-formcontrol)\n- [`muiFormControlGroup`: \u0026lt;FormControl\u0026gt; with \u0026lt;FormGroup\u0026gt;](#muiformcontrolgroup-formcontrol-with-formgroup)\n- [`muiGridContainer`: \u0026lt;Grid container\u0026gt;](#muigridcontainer-grid-container)\n- [`muiGridContainerCenter`: \u0026lt;Grid container\u0026gt; with centering](#muigridcontainercenter-grid-container-with-centering)\n- [`muiGridContainerFull`: \u0026lt;Grid container\u0026gt; with all props](#muigridcontainerfull-grid-container-with-all-props)\n- [`muiGridListSubheader`: \u0026lt;GridList\u0026gt; subheader](#muigridlistsubheader-gridlist-subheader)\n- [`muiGridListTilebar`: \u0026lt;GridListTileBar\u0026gt;](#muigridlisttilebar-gridlisttilebar)\n- [`muiIconButton`: \u0026lt;IconButton\u0026gt;](#muiiconbutton-iconbutton)\n- [`muiMenu`: \u0026lt;Menu\u0026gt;](#muimenu-menu)\n- [`muiMenuItem`: \u0026lt;MenuItem\u0026gt;](#muimenuitem-menuitem)\n- [`muiMenuPopupState`: \u0026lt;Menu\u0026gt; for material-ui-popup-state](#muimenupopupstate-menu-for-material-ui-popup-state)\n- [`muiRadioGroup`: \u0026lt;FormControl\u0026gt; with \u0026lt;RadioGroup\u0026gt;](#muiradiogroup-formcontrol-with-radiogroup)\n- [`muiRadioLabel`: \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muiradiolabel-radio-with-formcontrollabel)\n- [`muiRadioLabelPlacement`: \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement](#muiradiolabelplacement-radio-with-formcontrollabel-with-labelplacement)\n- [`muiSelectItem`: \u0026lt;MenuItem\u0026gt; inside \u0026lt;Select\u0026gt;](#muiselectitem-menuitem-inside-select)\n- [`muiSliderContinuous`: \u0026lt;Slider\u0026gt; with continuous values](#muislidercontinuous-slider-with-continuous-values)\n- [`muiSliderDiscrete`: \u0026lt;Slider\u0026gt; with discrete values](#muisliderdiscrete-slider-with-discrete-values)\n- [`muiSnackbar`: \u0026lt;Snackbar\u0026gt;](#muisnackbar-snackbar)\n- [`muiSnackbarContent`: \u0026lt;SnackbarContent\u0026gt;](#muisnackbarcontent-snackbarcontent)\n- [`muiStartAdornment`: start \u0026lt;InputAdornment\u0026gt;](#muistartadornment-start-inputadornment)\n- [`muiStep`: \u0026lt;Step\u0026gt;](#muistep-step)\n- [`muiStepContent`: \u0026lt;Step\u0026gt; with \u0026lt;StepContent\u0026gt;](#muistepcontent-step-with-stepcontent)\n- [`muiStepOptional`: optional \u0026lt;Step\u0026gt;](#muistepoptional-optional-step)\n- [`muiStepper`: \u0026lt;Stepper\u0026gt;](#muistepper-stepper)\n- [`muiSwipeableViews`: \u0026lt;SwipeableViews\u0026gt;](#muiswipeableviews-swipeableviews)\n- [`muiSwitch`: \u0026lt;Switch\u0026gt;](#muiswitch-switch)\n- [`muiSwitchLabel`: \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt;](#muiswitchlabel-switch-with-formcontrollabel)\n- [`muiSwitchLabelPlacement`: \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement](#muiswitchlabelplacement-switch-with-formcontrollabel-with-labelplacement)\n- [`muiTabPanel`: \u0026lt;TabPanel\u0026gt;](#muitabpanel-tabpanel)\n- [`muiTabs`: \u0026lt;Tabs\u0026gt;](#muitabs-tabs)\n- [`muiTabsScrollable`: scrollable \u0026lt;Tabs\u0026gt;](#muitabsscrollable-scrollable-tabs)\n- [`muiTextField`: \u0026lt;TextField\u0026gt;](#muitextfield-textfield)\n- [`muiTextFieldMore`: \u0026lt;TextField\u0026gt; with more props](#muitextfieldmore-textfield-with-more-props)\n- [`muiTextFieldSelect`: \u0026lt;TextField select\u0026gt;](#muitextfieldselect-textfield-select)\n- [`muiTextFieldVariant`: \u0026lt;TextField\u0026gt; with variant](#muitextfieldvariant-textfield-with-variant)\n- [`muiTooltip`: \u0026lt;Tooltip\u0026gt;](#muitooltip-tooltip)\n- [`muiTypography`: \u0026lt;Typography\u0026gt;](#muitypography-typography)\n\n### `muiAppBar`: \u0026lt;AppBar\u0026gt;\n\n```\n\u003cAppBar position=\"${1|fixed,absolute,relative,static,sticky|}\" color=\"${2|primary,default,inherit,secondary,transparent|}\"\u003e\n  \u003cToolbar$3\u003e\n    \u003cTypography variant=\"h6\"$4\u003e\n      $5\n    \u003c/Typography\u003e\n  \u003c/Toolbar\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiAppBarMenu`: \u0026lt;AppBar\u0026gt; with menu icon\n\n```\n\u003cAppBar position=\"${1|fixed,absolute,relative,static,sticky|}\" color=\"${2|primary,default,inherit,secondary,transparent|}\"\u003e\n  \u003cToolbar$3\u003e\n    \u003cIconButton edge=\"start\" color=\"inherit\" aria-label=\"menu\"\u003e\n      \u003cMenu /\u003e\n    \u003c/IconButton\u003e\n    \u003cTypography variant=\"h6\"$4\u003e\n      $5\n    \u003c/Typography\u003e\n  \u003c/Toolbar\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiBottomNavigation`: \u0026lt;BottomNavigation\u0026gt;\n\n```\n\u003cBottomNavigation value={$1} onChange={$2}$3\u003e\n  $4\n\u003c/BottomNavigation\u003e\n```\n\n### `muiBottomNavigationAction`: \u0026lt;BottomNavigationAction\u0026gt;\n\n```\n\u003cBottomNavigationAction label=\"$1\" value={$2} icon={$3}$4 /\u003e\n```\n\n### `muiButton`: \u0026lt;Button\u0026gt;\n\n```\n\u003cButton variant=\"${1|text,contained,outlined|}\" color=\"${2|default,inherit,primary,secondary|}\"$3\u003e\n  $4\n\u003c/Button\u003e\n```\n\n### `muiButtonGroup`: \u0026lt;ButtonGroup\u0026gt;\n\n```\n\u003cButtonGroup variant=\"${1|text,contained,outlined|}\" color=\"${2|default,inherit,primary,secondary|}\" aria-label=\"$3\"$4\u003e\n  \u003cButton\u003e$5\u003c/Button\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  $7\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonGroupSize`: \u0026lt;ButtonGroup\u0026gt; with size\n\n```\n\u003cButtonGroup variant=\"${1|text,contained,outlined|}\" color=\"${2|default,inherit,primary,secondary|}\" size=\"${3|small,medium,large|}\" aria-label=\"$4\"$5\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  \u003cButton\u003e$7\u003c/Button\u003e\n  $8\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonGroupVertical`: vertical \u0026lt;ButtonGroup\u0026gt;\n\n```\n\u003cButtonGroup orientation=\"vertical\" variant=\"${1|text,contained,outlined|}\" color=\"${2|default,inherit,primary,secondary|}\" aria-label=\"$3\"$4\u003e\n  \u003cButton\u003e$5\u003c/Button\u003e\n  \u003cButton\u003e$6\u003c/Button\u003e\n  $7\n\u003c/ButtonGroup\u003e\n```\n\n### `muiButtonSize`: \u0026lt;Button\u0026gt; with size\n\n```\n\u003cButton\n  variant=\"${1|text,contained,outlined|}\"\n  color=\"${2|default,inherit,primary,secondary|}\"\n  size=\"${3|small,medium,large|}\"\n  $4\n\u003e\n  $5\n\u003c/Button\u003e\n```\n\n### `muiButtonText`: text \u0026lt;Button\u0026gt;\n\n```\n\u003cButton color=\"${1|default,inherit,primary,secondary|}\"$2\u003e$3\u003c/Button\u003e\n```\n\n### `muiButtonWithIcon`: \u0026lt;Button\u0026gt; with icon and label\n\n```\n\u003cButton\n  variant=\"${1|text,contained,outlined|}\"\n  color=\"${2|default,inherit,primary,secondary|}\"\n  startIcon={$3}\n  $4\n\u003e\n  $5\n\u003c/Button\u003e\n```\n\n### `muiCardHeader`: \u0026lt;CardHeader\u0026gt;\n\n```\n\u003cCardHeader${1:\n  avatar={\n    \u003cAvatar aria-label=\"$2\"$3\u003e\n      $4\n    \u003c/Avatar\u003e\n  \\}}${5:\n  action={\n    \u003cIconButton aria-label=\"$6\"$7\u003e\n      $8\n    \u003c/IconButton\u003e\n  \\}}${9:\n  title=\"$10\"}${11:\n  subheader=\"$12\"}\n  $13\n/\u003e\n```\n\n### `muiCardMedia`: \u0026lt;CardMedia\u0026gt;\n\n```\n\u003cCardMedia title=\"$1\" image=\"$2\" /\u003e\n```\n\n### `muiCheckboxLabel`: \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cCheckbox\n      value=\"$2\"\n      checked={$3}\n      onChange={$4}\n      color=\"${5:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cCheckbox\n      value=\"$2\"\n      defaultChecked={$3}\n      color=\"${4:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiCheckboxLabelPlacement`: \u0026lt;Checkbox\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cCheckbox\n      value=\"$3\"\n      checked={$4}\n      onChange={$5}\n      color=\"${6:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cCheckbox\n      value=\"$3\"\n      defaultChecked={$4}\n      color=\"${5:primary}\"\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiContainer`: \u0026lt;Container\u0026gt;\n\n```\n\u003cContainer maxWidth=\"${1|xs,sm,md,lg,xl|}\"$2\u003e\n  $3\n\u003c/Container\u003e\n```\n\n### `muiDialog`: \u0026lt;Dialog\u0026gt;\n\n```\n\u003cDialog open={$1} onClose={$2} aria-labelledby={$3}\u003e${4:\n  \u003cDialogTitle id={$3\\}\u003e\n    $5\n  \u003c/DialogTitle\u003e}${6:\n  \u003cDialogContent\u003e${7:\n    \u003cDialogContentText\u003e\n      $8\n    \u003c/DialogContentText\u003e}\n  \u003c/DialogContent\u003e}${9:\n  \u003cDialogActions\u003e\n    \u003cButton onClick={$10\\} color=\"${11|default,inherit,primary,secondary|}\"\u003e${12:\n      Cancel}\n    \u003c/Button\u003e\n  \u003c/DialogActions\u003e}\n\u003c/Dialog\u003e\n```\n\n### `muiDialogSimple`: \u0026lt;Dialog\u0026gt;\n\n```\n\u003cDialog open={$1} onClose={$2} aria-labelledby=\"$3\"\u003e\n  $4\n\u003c/Dialog\u003e\n```\n\n### `muiDrawerPermanent`: permanent \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer variant=\"permanent\" anchor=\"${1|left,right,top,bottom|}\"$2\u003e\n  $3\n\u003c/Drawer\u003e\n```\n\n### `muiDrawerPersistent`: persistent \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer\n  variant=\"persistent\"\n  anchor=\"${1|left,right,top,bottom|}\"\n  open={$2}\n  $3\n\u003e\n  $4\n\u003c/Drawer\u003e\n```\n\n### `muiDrawerTemporary`: temporary \u0026lt;Drawer\u0026gt;\n\n```\n\u003cDrawer\n  variant=\"temporary\"\n  anchor=\"${1|left,right,top,bottom|}\"\n  open={$2}\n  onClose={$3}\n  $4\n\u003e\n  $5\n\u003c/Drawer\u003e\n```\n\n### `muiEndAdornment`: end \u0026lt;InputAdornment\u0026gt;\n\n```\n\nendAdornment={\n  \u003cInputAdornment position=\"end\"\u003e\n    $0\n  \u003c/InputAdornment\u003e\n}\n\n```\n\n### `muiExpansionPanel`: \u0026lt;ExpansionPanel\u0026gt;\n\n```\n\u003cExpansionPanel\u003e\n  \u003cExpansionPanelSummary\n    expandIcon={\u003cExpandMoreIcon /\u003e}\n    aria-label=\"${1:Expand}\"\n    aria-controls=\"$2-content\"\n    id=\"$2-header\"\n  \u003e\n    \u003cTypography$3\u003e$4\u003c/Typography\u003e\n  \u003c/ExpansionPanelSummary\u003e\n  \u003cExpansionPanelDetails\u003e$5\u003c/ExpansionPanelDetails\u003e\n\u003c/ExpansionPanel\u003e\n```\n\n### `muiExpansionPanelControlled`: controlled \u0026lt;ExpansionPanel\u0026gt;\n\n```\n\u003cExpansionPanel expanded={$1} onChange={$2}\u003e\n  \u003cExpansionPanelSummary\n    expandIcon={\u003cExpandMore /\u003e}\n    aria-label=\"${3:Expand}\"\n    aria-controls=\"$4-content\"\n    id=\"$4-header\"\n  \u003e\n    \u003cTypography$5\u003e$6\u003c/Typography\u003e\n  \u003c/ExpansionPanelSummary\u003e\n  \u003cExpansionPanelDetails\u003e$7\u003c/ExpansionPanelDetails\u003e\n\u003c/ExpansionPanel\u003e\n```\n\n### `muiFab`: \u0026lt;Fab\u0026gt;\n\n```\n\u003cFab color=\"${1|default,inherit,primary,secondary|}\" aria-label=\"$2\"$3\u003e\n  \u003c$4Icon /\u003e\n\u003c/Fab\u003e\n```\n\n### `muiFabExtended`: \u0026lt;Fab variant=\"extended\"\u0026gt;\n\n```\n\u003cFab variant=\"extended\" color=\"${1|default,inherit,primary,secondary|}\" aria-label=\"$2\"$3\u003e\n  \u003cBox marginRight={1}\u003e\u003c$4Icon /\u003e\u003c/Box\u003e\n  $5\n\u003c/Fab\u003e\n```\n\n### `muiFormControl`: \u0026lt;FormControl\u0026gt;\n\n```\n\u003cFormControl$1\u003e\n  \u003cFormLabel\u003e$2\u003c/FormLabel\u003e\n  $0\n  \u003cFormHelperText\u003e$3\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiFormControlGroup`: \u0026lt;FormControl\u0026gt; with \u0026lt;FormGroup\u0026gt;\n\n```\n\u003cFormControl component=${1:\"fieldset\"}$2\u003e\n  \u003cFormLabel component=${3:\"legend\"}\u003e$4\u003c/FormLabel\u003e\n  \u003cFormGroup\u003e\n    $0\n  \u003c/FormGroup\u003e\n  \u003cFormHelperText\u003e$5\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiGridContainer`: \u0026lt;Grid container\u0026gt;\n\n```\n\u003cGrid container spacing={$1}$2\u003e\n  $3\n\u003c/Grid\u003e\n```\n\n### `muiGridContainerCenter`: \u0026lt;Grid container\u0026gt; with centering\n\n```\n\u003cGrid\n  container\n  spacing={${1:1}}${2:\n  direction=\"${3|row,row-reverse,column,column-reverse|}\"}\n  justify=\"${4:center}\"\n  alignItems=\"${5:center}\"\n  alignContent=\"${6:center}\"${7:\n  wrap=\"${8|nowrap,wrap,wrap-reverse|}\"}\n  $9\n\u003e\n  $10\n\u003c/Grid\u003e\n```\n\n### `muiGridContainerFull`: \u0026lt;Grid container\u0026gt; with all props\n\n```\n\u003cGrid\n  container${1:\n  spacing={${2:1}\\}}${3:\n  direction=\"${4|row,row-reverse,column,column-reverse|}\"}${5:\n  justify=\"${6|flex-start,center,flex-end,space-between,space-around,space-evenly|}\"}${7:\n  alignItems=\"${8|flex-start,center,flex-end,stretch,baseline|}\"}${9:\n  alignContent=\"${10|stretch,center,flex-start,flex-end,space-between,space-around|}\"}${11:\n  wrap=\"${12|nowrap,wrap,wrap-reverse|}\"}\n  $13\n\u003e\n  $14\n\u003c/Grid\u003e\n```\n\n### `muiGridListSubheader`: \u0026lt;GridList\u0026gt; subheader\n\n```\n\u003cGridListTile cols={${1:2}} style={{ height: 'auto' }}\u003e\n  \u003cListSubheader component=\"div\"\u003e$2\u003c/ListSubheader\u003e\n\u003c/GridListTile\u003e\n```\n\n### `muiGridListTilebar`: \u0026lt;GridListTileBar\u0026gt;\n\n```\n\u003cGridListTileBar${1:\n  title=\"$2\"}${3:\n  subtitle=\"$4\"}${5:\n  actionIcon={\n    \u003cIconButton aria-label=\"$6\"$7\u003e\n      $8\n    \u003c/IconButton\u003e\n  \\}}\n/\u003e\n```\n\n### `muiIconButton`: \u0026lt;IconButton\u0026gt;\n\n```\n\u003cIconButton aria-label=\"$1\" onClick={$2}$3\u003e\n  $4\n\u003c/IconButton\u003e\n```\n\n### `muiMenu`: \u0026lt;Menu\u0026gt;\n\n```\n\u003cMenu id=\"$1\" anchorEl={$2} keepMounted open={Boolean($2)} onClose={$3}$4\u003e\n  $5\n\u003c/Menu\u003e\n```\n\n### `muiMenuItem`: \u0026lt;MenuItem\u0026gt;\n\n```\n\u003cMenuItem onClick={$1}$2\u003e$3\u003c/MenuItem\u003e\n```\n\n### `muiMenuPopupState`: \u0026lt;Menu\u0026gt; for material-ui-popup-state\n\n```\n\u003cMenu\n  id=\"$1\"\n  keepMounted\n  {...bindMenu(${2:popupState})}\n  $3\n\u003e\n  $4\n\u003c/Menu\u003e\n```\n\n### `muiRadioGroup`: \u0026lt;FormControl\u0026gt; with \u0026lt;RadioGroup\u0026gt;\n\n```\n\u003cFormControl component=${1:\"fieldset\"}$2\u003e\n  \u003cFormLabel component=${3:\"legend\"}\u003e$4\u003c/FormLabel\u003e\n  \u003cRadioGroup aria-label=\"$5\" name=\"$6\" value={$7} onChange={$8}\u003e$0\u003c/RadioGroup\u003e\n  \u003cFormHelperText\u003e$9\u003c/FormHelperText\u003e\n\u003c/FormControl\u003e\n```\n\n### `muiRadioLabel`: \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n```\n\u003cFormControlLabel value=\"$1\" label=\"$2\" control={\u003cRadio$3 /\u003e} /\u003e\n```\n\n### `muiRadioLabelPlacement`: \u0026lt;Radio\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement\n\n```\n\u003cFormControlLabel\n  value=\"$1\"\n  label=\"$2\"\n  labelPlacement=\"${3|end,start,top,bottom|}\"\n  control={\u003cRadio$4 /\u003e}\n/\u003e\n```\n\n### `muiSelectItem`: \u0026lt;MenuItem\u0026gt; inside \u0026lt;Select\u0026gt;\n\n```\n\u003cMenuItem value={$1}$2\u003e$3\u003c/MenuItem\u003e\n```\n\n### `muiSliderContinuous`: \u0026lt;Slider\u0026gt; with continuous values\n\n#### Controlled\n\n```\n\u003cSlider\n  value={$1}\n  onChange={$2}\n  aria-labelledby=\"$3\"\n  min={${4:0}}\n  max={${5:100}}\n  $6\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSlider\n  defaultValue={$1}\n  aria-labelledby=\"$2\"\n  min={${3:0}}\n  max={${4:100}}\n  $5\n/\u003e\n```\n\n### `muiSliderDiscrete`: \u0026lt;Slider\u0026gt; with discrete values\n\n#### Controlled\n\n```\n\u003cSlider\n  value={$1}\n  onChange={$2}\n  aria-labelledby=\"$3\"\n  step={${4:1}}\n  marks\n  min={${5:0}}\n  max={${6:100}}\n  $7\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSlider\n  defaultValue={$1}\n  aria-labelledby=\"$2\"\n  step={${3:1}}\n  marks\n  min={${4:0}}\n  max={${5:100}}\n  $6\n/\u003e\n```\n\n### `muiSnackbar`: \u0026lt;Snackbar\u0026gt;\n\n```\n\u003cSnackbar\n  anchorOrigin={{ vertical: '$1', horizontal: '$2' }}\n  open={$3}\n  onClose={$4}\n  message=\"$5\"${6:\n  action={\n    \u003cIconButton size=\"small\" aria-label=\"close\" color=\"inherit\" onClick={$4\\}\u003e\n      \u003cClose fontSize=\"small\" /\u003e\n    \u003c/IconButton\u003e\n  \\}}\n/\u003e\n```\n\n### `muiSnackbarContent`: \u0026lt;SnackbarContent\u0026gt;\n\n```\n\u003cSnackbarContent message=\"$1\" action={$2} /\u003e\n```\n\n### `muiStartAdornment`: start \u0026lt;InputAdornment\u0026gt;\n\n```\n\nstartAdornment={\n  \u003cInputAdornment position=\"start\"\u003e\n    $0\n  \u003c/InputAdornment\u003e\n}\n\n```\n\n### `muiStep`: \u0026lt;Step\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\u003e$4\u003c/StepLabel\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepContent`: \u0026lt;Step\u0026gt; with \u0026lt;StepContent\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\u003e$4\u003c/StepLabel\u003e\n  \u003cStepContent\u003e\n    $5\n  \u003c/StepContent\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepOptional`: optional \u0026lt;Step\u0026gt;\n\n```\n\u003cStep key={$1} completed={$2}$3\u003e\n  \u003cStepLabel\n    optional={\u003cTypography variant=\"caption\"\u003e${4:Optional}\u003c/Typography\u003e}\n  \u003e\n    $5\n  \u003c/StepLabel\u003e\n\u003c/Step\u003e\n```\n\n### `muiStepper`: \u0026lt;Stepper\u0026gt;\n\n```\n\u003cStepper activeStep={$1}\u003e\n  $2\n\u003c/Stepper\u003e\n```\n\n### `muiSwipeableViews`: \u0026lt;SwipeableViews\u0026gt;\n\n```\n\u003cSwipeableViews\n  axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}\n  index={$1}\n  onChangeIndex={$2}\n  $3\n\u003e\n  $0\n\u003c/SwipeableViews\u003e\n```\n\n### `muiSwitch`: \u0026lt;Switch\u0026gt;\n\n#### Controlled\n\n```\n\u003cSwitch\n  value=\"$1\"\n  checked={$2}\n  onChange={$3}\n  inputProps={{ \"aria-label\": '$4' }}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cSwitch\n  value=\"$1\"\n  defaultChecked={$2}\n  inputProps={{ \"aria-label\": '$3' }}\n  $4\n/\u003e\n```\n\n### `muiSwitchLabel`: \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt;\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cSwitch\n      value=\"$2\"\n      checked={$3}\n      onChange={$4}\n      $5\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  control={\n    \u003cSwitch\n      value=\"$2\"\n      defaultChecked={$3}\n      $4\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiSwitchLabelPlacement`: \u0026lt;Switch\u0026gt; with \u0026lt;FormControlLabel\u0026gt; with labelPlacement\n\n#### Controlled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cSwitch\n      value=\"$3\"\n      checked={$4}\n      onChange={$5}\n      $6\n    /\u003e\n  }\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cFormControlLabel\n  label=\"$1\"\n  labelPlacement=\"${2|end,start,top,bottom|}\"\n  control={\n    \u003cSwitch\n      value=\"$3\"\n      defaultChecked={$4}\n      $5\n    /\u003e\n  }\n/\u003e\n```\n\n### `muiTabPanel`: \u0026lt;TabPanel\u0026gt;\n\n```\n\u003cTabPanel value={$1} index={$2} ${3:dir={theme.direction\\}}$4\u003e\n  $5\n\u003c/TabPanel\u003e\n```\n\n### `muiTabs`: \u0026lt;Tabs\u0026gt;\n\n```\n\u003cAppBar position=\"static\" color=\"${1|primary,default,inherit,secondary,transparent|}\"$2\u003e\n  \u003cTabs value={$3} onChange={$4} aria-label=\"$5\"$6\u003e\n    $7\n  \u003c/Tabs\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiTabsScrollable`: scrollable \u0026lt;Tabs\u0026gt;\n\n```\n\u003cAppBar position=\"static\" color=\"${1|primary,default,inherit,secondary,transparent|}\"$2\u003e\n  \u003cTabs\n    value={$3}\n    onChange={$4}\n    aria-label=\"$5\"\n    variant=\"scrollable\"\n    scrollButtons=\"${6:auto}\"\n    $7\n  \u003e\n    $8\n  \u003c/Tabs\u003e\n\u003c/AppBar\u003e\n```\n\n### `muiTextField`: \u0026lt;TextField\u0026gt;\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  value={$3}\n  onChange={$4}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  defaultValue={$3}\n  $4\n/\u003e\n```\n\n### `muiTextFieldMore`: \u0026lt;TextField\u0026gt; with more props\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"${3:\n  variant=\"${4|standard,outlined,filled|}\"}${5:\n  color=\"${6|primary,secondary|}\"}${7:\n  margin=\"${8|none,dense,normal|}\"}${9:\n  sizes=\"${10|small,medium|}\"}\n  value={$11}\n  onChange={$12}\n  $13\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"${3:\n  variant=\"${4|standard,outlined,filled|}\"}${5:\n  color=\"${6|primary,secondary|}\"}${7:\n  margin=\"${8|none,dense,normal|}\"}${9:\n  sizes=\"${10|small,medium|}\"}\n  defaultValue={$11}\n  $12\n/\u003e\n```\n\n### `muiTextFieldSelect`: \u0026lt;TextField select\u0026gt;\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  select\n  value={$3}\n  onChange={$4}\n  $5\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  select\n  defaultValue={$3}\n  $4\n/\u003e\n```\n\n### `muiTextFieldVariant`: \u0026lt;TextField\u0026gt; with variant\n\n#### Controlled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  variant=\"${3|standard,outlined,filled|}\"\n  value={$4}\n  onChange={$5}\n  $6\n/\u003e\n```\n\n#### Uncontrolled\n\n```\n\u003cTextField\n  id=\"$1\"\n  label=\"$2\"\n  variant=\"${3|standard,outlined,filled|}\"\n  defaultValue={$4}\n  $5\n/\u003e\n```\n\n### `muiTooltip`: \u0026lt;Tooltip\u0026gt;\n\n```\n\u003cTooltip title=\"$1\"$2\u003e\n  $TM_SELECTED_TEXT$0\n\u003c/Tooltip\u003e\n```\n\n### `muiTypography`: \u0026lt;Typography\u0026gt;\n\n```\n\u003cTypography variant=\"${1|h1,h2,h3,h4,h5,h6,subtitle1,subtitle2,body1,body2,caption,button,overline,srOnly,inherit|}\" ${2:color=\"${3|initial,inherit,primary,secondary,textPrimary,textSecondary,error|}\"}$4\u003e$TM_SELECTED_TEXT$0\u003c/Typography\u003e\n```\n\n\u003c!-- snippetsend --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fmaterial-ui-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvscodeshift%2Fmaterial-ui-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvscodeshift%2Fmaterial-ui-snippets/lists"}