Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cweise/styled-material-ui
Style material-ui components and its nested children with styled-components.
https://github.com/cweise/styled-material-ui
material material-ui styled styled-components
Last synced: 13 days ago
JSON representation
Style material-ui components and its nested children with styled-components.
- Host: GitHub
- URL: https://github.com/cweise/styled-material-ui
- Owner: cweise
- Created: 2018-11-20T16:12:17.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T18:11:08.000Z (almost 2 years ago)
- Last Synced: 2024-10-27T13:48:34.932Z (19 days ago)
- Topics: material, material-ui, styled, styled-components
- Language: JavaScript
- Homepage:
- Size: 2.3 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Description
Style material ui components with the awesome styled-components library.
## How to install
```console
npm install @thepeaklab/styled-material-ui --save
```
## How does it work
Material 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.
We 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.
## TextField Example
```javascript
import React from "react";
import styled from "styled-components";
import { TextField } from "@thepeaklab/styled-material-ui";
import Selectors from "@thepeaklab/styled-material-ui/Selectors";
const StyledTextField = styled(TextField)`
${Selectors.TextField.Input} {
background-color: #eeeeee;
}
`;
export default () => ;
```
## Button Example
```javascript
import React from "react";
import styled from "styled-components";
import { Button } from "@thepeaklab/styled-material-ui";
import Selectors from "@thepeaklab/styled-material-ui/Selectors";
const StyledButton = styled(Button)`
${Selectors.Button.Root} {
border-radius: 10px;
}
${Selectors.Button.ContainedPrimary} {
background-color: #eeeeee;
&:hover {
background-color: #cccccc;
}
}
`;
export default () => ;
```
## Available Material-UI Components
- [x] [AppBar](https://material-ui.com/api/app-bar/#css)
- [x] [Avatar](https://material-ui.com/api/avatar/#css)
- [x] [Backdrop](https://material-ui.com/api/backdrop/#css)
- [x] [Badge](https://material-ui.com/api/badge/#css)
- [x] [BottomNavigation](https://material-ui.com/api/bottom-navigation/#css)
- [x] [BottomNavigationAction](https://material-ui.com/api/bottom-navigation-action/#css)
- [x] [Button](https://material-ui.com/api/button/#css)
- [x] [ButtonBase](https://material-ui.com/api/button-base/#css)
- [ ] Card
- [ ] CardActionArea
- [ ] CardActions
- [ ] CardContent
- [ ] CardHeader
- [ ] CardMedia
- [ ] Checkbox
- [x] [Chip](https://material-ui.com/api/chip/#css)
- [ ] CircularProgress
- [ ] ClickAwayListener
- [x] [Collapse](https://material-ui.com/api/collapse/#css)
- [ ] CssBaseline
- [ ] Dialog
- [ ] DialogActions
- [ ] DialogContent
- [ ] DialogContentText
- [ ] DialogTitle
- [ ] Divider
- [ ] Drawer
- [x] [ExpansionPanel](https://material-ui.com/api/expansion-panel/#css)
- [ ] ExpansionPanelActions
- [ ] ExpansionPanelDetails
- [ ] ExpansionPanelSummary
- [x] [Fab](https://material-ui.com/api/fab/#fab-api)
- [ ] Fade
- [x] [FormControl](https://material-ui.com/api/form-control/#css)
- [ ] FormControlLabel
- [ ] FormGroup
- [x] [FormHelperText](https://material-ui.com/api/form-helper-text/#css)
- [ ] FormLabel
- [ ] Grid
- [ ] GridList
- [ ] GridListTile
- [ ] GridListTileBar
- [ ] Grow
- [ ] Hidden
- [x] [Icon](https://material-ui.com/api/icon/#css)
- [ ] IconButton
- [x] [Input](https://material-ui.com/api/input/#css)
- [ ] InputAdornment
- [x] [InputLabel](https://material-ui.com/api/input-label/#css)
- [ ] LinearProgress
- [x] [List](https://material-ui.com/api/list/#css)
- [ ] ListItem
- [ ] ListItemAvatar
- [ ] ListItemIcon
- [ ] ListItemSecondaryAction
- [x] [ListItemText](https://material-ui.com/api/list-item-text/#css)
- [ ] ListSubheader
- [x] [Menu](https://material-ui.com/api/menu/#css)
- [x] [MenuItem](https://material-ui.com/api/menu-item/#css)
- [x] [MenuList](https://material-ui.com/api/menu-list/#css)
- [ ] MobileStepper
- [ ] Modal
- [ ] MuiThemeProvider
- [ ] NativeSelect
- [ ] NoSsr
- [x] [OutlinedInput](https://material-ui.com/api/outlined-input/#css)
- [x] [Paper](https://material-ui.com/api/paper/#css)
- [ ] Popover
- [ ] Popper
- [ ] Portal
- [ ] Radio
- [ ] RadioGroup
- [ ] RootRef
- [x] [Select](https://material-ui.com/api/select/#css)
- [ ] Slide
- [x] [Snackbar](https://material-ui.com/api/snackbar/#css)
- [x] [SnackbarContent](https://material-ui.com/api/snackbar-content/#css)
- [ ] Step
- [ ] StepButton
- [ ] StepConnector
- [ ] StepContent
- [ ] StepIcon
- [ ] StepLabel
- [ ] Stepper
- [x] [SvgIcon](https://material-ui.com/api/svg-icon/#css)
- [ ] SwipeableDrawer
- [ ] Switch
- [x] [Tab](https://material-ui.com/api/tab/#css)
- [x] [Table](https://material-ui.com/api/table/#css)
- [x] [TableBody](https://material-ui.com/api/table-body/#css)
- [x] [TableCell](https://material-ui.com/api/table-cell/#css)
- [x] [TableFooter](https://material-ui.com/api/table-footer/#css)
- [x] [TableHead](https://material-ui.com/api/table-head/#css)
- [ ] TablePagination
- [x] [TableRow](https://material-ui.com/api/table-row/#css)
- [ ] TableSortLabel
- [x] [Tabs](https://material-ui.com/api/tabs/#css)
- [x] [TextField](https://material-ui.com/api/text-field/#css)
- [ ] Toolbar
- [x] [Tooltip](https://material-ui.com/api/tooltip/#css)
- [x] [TouchRipple](https://material-ui.com/api/touch-ripple/#css)
- [x] [Typography](https://material-ui.com/api/typography/#css)
- [ ] Zoom