@thepeaklab/styled-material-ui

Description

Style material ui components with the awesome styled-components library.

How to install

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

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 () => <StyledTextField name="my-textfield" />;

Button Example

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 () => <StyledButton color="primary" variant="contained" />;

Available Material-UI Components

• [x] AppBar
• [x] Avatar
• [x] Backdrop
• [x] Badge
• [x] BottomNavigation
• [x] BottomNavigationAction
• [x] Button
• [x] ButtonBase
• [ ] Card
• [ ] CardActionArea
• [ ] CardActions
• [ ] CardContent
• [ ] CardHeader
• [ ] CardMedia
• [ ] Checkbox
• [x] Chip
• [ ] CircularProgress
• [ ] ClickAwayListener
• [x] Collapse
• [ ] CssBaseline
• [ ] Dialog
• [ ] DialogActions
• [ ] DialogContent
• [ ] DialogContentText
• [ ] DialogTitle
• [ ] Divider
• [ ] Drawer
• [x] ExpansionPanel
• [ ] ExpansionPanelActions
• [ ] ExpansionPanelDetails
• [ ] ExpansionPanelSummary
• [x] Fab
• [ ] Fade
• [x] FormControl
• [ ] FormControlLabel
• [ ] FormGroup
• [x] FormHelperText
• [ ] FormLabel
• [ ] Grid
• [ ] GridList
• [ ] GridListTile
• [ ] GridListTileBar
• [ ] Grow
• [ ] Hidden
• [x] Icon
• [ ] IconButton
• [x] Input
• [ ] InputAdornment
• [x] InputLabel
• [ ] LinearProgress
• [x] List
• [ ] ListItem
• [ ] ListItemAvatar
• [ ] ListItemIcon
• [ ] ListItemSecondaryAction
• [x] ListItemText
• [ ] ListSubheader
• [x] Menu
• [x] MenuItem
• [x] MenuList
• [ ] MobileStepper
• [ ] Modal
• [ ] MuiThemeProvider
• [ ] NativeSelect
• [ ] NoSsr
• [x] OutlinedInput
• [x] Paper
• [ ] Popover
• [ ] Popper
• [ ] Portal
• [ ] Radio
• [ ] RadioGroup
• [ ] RootRef
• [x] Select
• [ ] Slide
• [x] Snackbar
• [x] SnackbarContent
• [ ] Step
• [ ] StepButton
• [ ] StepConnector
• [ ] StepContent
• [ ] StepIcon
• [ ] StepLabel
• [ ] Stepper
• [x] SvgIcon
• [ ] SwipeableDrawer
• [ ] Switch
• [x] Tab
• [x] Table
• [x] TableBody
• [x] TableCell
• [x] TableFooter
• [x] TableHead
• [ ] TablePagination
• [x] TableRow
• [ ] TableSortLabel
• [x] Tabs
• [x] TextField
• [ ] Toolbar
• [x] Tooltip
• [x] TouchRipple
• [x] Typography
• [ ] Zoom