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>;
}

With styles component

import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'mui-styles';

const useStyles = {
  container: {
    width: "100vw",
    height: "100vh",
    padding: 0,
  },
};

function WithStylesComponent(props) {
  const { classes } = props;
  return <div className={classes.container}>With styles component</div>;
}

WithStylesComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(useStyles)(WithStylesComponent);