Sample Themed Material-UI button

import { FC } from "react"
import {
  Button,
  ThemeProvider as MuiThemeProvider,
  createMuiTheme,
  responsiveFontSizes,
  makeStyles,
} from "@material-ui/core"

/// "Global" Theme. This would wrap your entire app

export const EthanThemeProvider: FC = ({ children }) => {
  const theme = responsiveFontSizes(
    createMuiTheme({
      palette: {
        primary: {
          main: "#05A8AA",
          contrastText: "#fff",
        },
      },
      typography: {
        button: {
          textTransform: "capitalize",
          fontSize: "12px",
        },
      },
      // spacing: 8 // Default is 8px already, but you can change that here
    })
  )

  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
}

// Styled MUI Button. This would be the individual Button component used within your app

const useStyles = makeStyles(({ spacing }) => ({
  root: {
    padding: `${spacing(2)}px ${spacing(5)}px`, // padding: "16px 40px"
  },
}))

const EthansButton = () => {
  const classes = useStyles()
  return (
    <Button
      className={classes.root}
      variant="contained"
      disableElevation
      color="primary"
      disableRipple
    >
      Ethan!
    </Button>
  )
}

export default EthansButton