{"id":15805274,"url":"https://github.com/cweise/styled-material-ui","last_synced_at":"2025-05-07T13:01:17.864Z","repository":{"id":33661158,"uuid":"158417382","full_name":"cweise/styled-material-ui","owner":"cweise","description":"Style material-ui components and its nested children with styled-components.","archived":false,"fork":false,"pushed_at":"2023-01-04T18:11:08.000Z","size":2409,"stargazers_count":4,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-28T07:03:18.568Z","etag":null,"topics":["material","material-ui","styled","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cweise.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-20T16:12:17.000Z","updated_at":"2022-05-11T09:13:50.000Z","dependencies_parsed_at":"2023-01-15T01:56:13.866Z","dependency_job_id":null,"html_url":"https://github.com/cweise/styled-material-ui","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cweise%2Fstyled-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cweise%2Fstyled-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cweise%2Fstyled-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cweise%2Fstyled-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cweise","download_url":"https://codeload.github.com/cweise/styled-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252883219,"owners_count":21819157,"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","material-ui","styled","styled-components"],"created_at":"2024-10-05T02:07:09.398Z","updated_at":"2025-05-07T13:01:17.788Z","avatar_url":"https://github.com/cweise.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Description\n\nStyle material ui components with the awesome styled-components library.\n\n## How to install\n\n```console\nnpm install @thepeaklab/styled-material-ui --save\n```\n\n## How does it work\n\nMaterial UI has its own documentation for the integration of the styled-components library. However, one quickly notices that subordinate components cannot be addressed directly. This is possible with this library.\n\nWe write all component keys from the Material UI documentation as CSS classes to the respective components and their child components. Thus it is possible to style the components via CSS classes.\n\n## TextField Example\n\n```javascript\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { TextField } from \"@thepeaklab/styled-material-ui\";\nimport Selectors from \"@thepeaklab/styled-material-ui/Selectors\";\n\nconst StyledTextField = styled(TextField)`\n  ${Selectors.TextField.Input} {\n    background-color: #eeeeee;\n  }\n`;\n\nexport default () =\u003e \u003cStyledTextField name=\"my-textfield\" /\u003e;\n```\n\n## Button Example\n\n```javascript\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { Button } from \"@thepeaklab/styled-material-ui\";\nimport Selectors from \"@thepeaklab/styled-material-ui/Selectors\";\n\nconst StyledButton = styled(Button)`\n  ${Selectors.Button.Root} {\n    border-radius: 10px;\n  }\n\n  ${Selectors.Button.ContainedPrimary} {\n    background-color: #eeeeee;\n\n    \u0026:hover {\n      background-color: #cccccc;\n    }\n  }\n`;\n\nexport default () =\u003e \u003cStyledButton color=\"primary\" variant=\"contained\" /\u003e;\n```\n\n## Available Material-UI Components\n\n- [x] [AppBar](https://material-ui.com/api/app-bar/#css)\n- [x] [Avatar](https://material-ui.com/api/avatar/#css)\n- [x] [Backdrop](https://material-ui.com/api/backdrop/#css)\n- [x] [Badge](https://material-ui.com/api/badge/#css)\n- [x] [BottomNavigation](https://material-ui.com/api/bottom-navigation/#css)\n- [x] [BottomNavigationAction](https://material-ui.com/api/bottom-navigation-action/#css)\n- [x] [Button](https://material-ui.com/api/button/#css)\n- [x] [ButtonBase](https://material-ui.com/api/button-base/#css)\n- [ ] Card\n- [ ] CardActionArea\n- [ ] CardActions\n- [ ] CardContent\n- [ ] CardHeader\n- [ ] CardMedia\n- [ ] Checkbox\n- [x] [Chip](https://material-ui.com/api/chip/#css)\n- [ ] CircularProgress\n- [ ] ClickAwayListener\n- [x] [Collapse](https://material-ui.com/api/collapse/#css)\n- [ ] CssBaseline\n- [ ] Dialog\n- [ ] DialogActions\n- [ ] DialogContent\n- [ ] DialogContentText\n- [ ] DialogTitle\n- [ ] Divider\n- [ ] Drawer\n- [x] [ExpansionPanel](https://material-ui.com/api/expansion-panel/#css)\n- [ ] ExpansionPanelActions\n- [ ] ExpansionPanelDetails\n- [ ] ExpansionPanelSummary\n- [x] [Fab](https://material-ui.com/api/fab/#fab-api)\n- [ ] Fade\n- [x] [FormControl](https://material-ui.com/api/form-control/#css)\n- [ ] FormControlLabel\n- [ ] FormGroup\n- [x] [FormHelperText](https://material-ui.com/api/form-helper-text/#css)\n- [ ] FormLabel\n- [ ] Grid\n- [ ] GridList\n- [ ] GridListTile\n- [ ] GridListTileBar\n- [ ] Grow\n- [ ] Hidden\n- [x] [Icon](https://material-ui.com/api/icon/#css)\n- [ ] IconButton\n- [x] [Input](https://material-ui.com/api/input/#css)\n- [ ] InputAdornment\n- [x] [InputLabel](https://material-ui.com/api/input-label/#css)\n- [ ] LinearProgress\n- [x] [List](https://material-ui.com/api/list/#css)\n- [ ] ListItem\n- [ ] ListItemAvatar\n- [ ] ListItemIcon\n- [ ] ListItemSecondaryAction\n- [x] [ListItemText](https://material-ui.com/api/list-item-text/#css)\n- [ ] ListSubheader\n- [x] [Menu](https://material-ui.com/api/menu/#css)\n- [x] [MenuItem](https://material-ui.com/api/menu-item/#css)\n- [x] [MenuList](https://material-ui.com/api/menu-list/#css)\n- [ ] MobileStepper\n- [ ] Modal\n- [ ] MuiThemeProvider\n- [ ] NativeSelect\n- [ ] NoSsr\n- [x] [OutlinedInput](https://material-ui.com/api/outlined-input/#css)\n- [x] [Paper](https://material-ui.com/api/paper/#css)\n- [ ] Popover\n- [ ] Popper\n- [ ] Portal\n- [ ] Radio\n- [ ] RadioGroup\n- [ ] RootRef\n- [x] [Select](https://material-ui.com/api/select/#css)\n- [ ] Slide\n- [x] [Snackbar](https://material-ui.com/api/snackbar/#css)\n- [x] [SnackbarContent](https://material-ui.com/api/snackbar-content/#css)\n- [ ] Step\n- [ ] StepButton\n- [ ] StepConnector\n- [ ] StepContent\n- [ ] StepIcon\n- [ ] StepLabel\n- [ ] Stepper\n- [x] [SvgIcon](https://material-ui.com/api/svg-icon/#css)\n- [ ] SwipeableDrawer\n- [ ] Switch\n- [x] [Tab](https://material-ui.com/api/tab/#css)\n- [x] [Table](https://material-ui.com/api/table/#css)\n- [x] [TableBody](https://material-ui.com/api/table-body/#css)\n- [x] [TableCell](https://material-ui.com/api/table-cell/#css)\n- [x] [TableFooter](https://material-ui.com/api/table-footer/#css)\n- [x] [TableHead](https://material-ui.com/api/table-head/#css)\n- [ ] TablePagination\n- [x] [TableRow](https://material-ui.com/api/table-row/#css)\n- [ ] TableSortLabel\n- [x] [Tabs](https://material-ui.com/api/tabs/#css)\n- [x] [TextField](https://material-ui.com/api/text-field/#css)\n- [ ] Toolbar\n- [x] [Tooltip](https://material-ui.com/api/tooltip/#css)\n- [x] [TouchRipple](https://material-ui.com/api/touch-ripple/#css)\n- [x] [Typography](https://material-ui.com/api/typography/#css)\n- [ ] Zoom\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcweise%2Fstyled-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcweise%2Fstyled-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcweise%2Fstyled-material-ui/lists"}