mui-styles

mui-styles

Material UI v5 and later versions

Install

Using npm:

npm install mui-styles

Usage Example

import { makeStyles } from "mui-styles";

const useStyles = makeStyles({
  container: {
    width: "100%",
    height: 100,
    padding: 10,
    backgroundColor: '#fff',
    borderRadius: 20
  },
});

export default function App() {
  const classes = useStyles();
  return <div className={classes.container}>Hello world</div>;
}

MakeStyles with theme

import { makeStyles, Theme } from "mui-styles";

const useStyles = makeStyles((theme: Theme) => ({
    width: "100%",
    height: 100,
    padding: 10,
    backgroundColor: theme.palette.primary.main,
    borderRadius: 20,
}));

export default function App() {
  const classes = useStyles();
  return <div className={classes.container}>Hello world</div>;
}

Styled components

import { styled } from "mui-styles";
import { Card } from "@mui/material";

const MuiCard = styled(Card)({
  maxWidth: 300,
  borderRadius: 20,
  padding: 15,
  margin: 20,
  textAlign: "center"
});

export default function StyledComponents() {
  return <MuiCard>Styled with card</MuiCard>;
}

Authors

• @blencm