mui

file.jsx

// button
import React from "react";
import { Button as MUIButton } from "@mui/material";
import styles from "./styles";

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  className?: string;
  variant?: "contained" | "outlined";
  color?: "primary" | "secondary" | "error";
}

const Button: React.FC<ButtonProps> = ({
  onClick,
  children,
  className,
  variant = "contained",
}) => (
  <MUIButton
    onClick={onClick}
    variant={variant}
    color={variant === "outlined" ? "error" : "primary"}
    sx={styles.button}
  >
    {children}
  </MUIButton>
);

export default Button;


---
  
  
// styles.ts
export default {
  button: {
    "&:hover": {
      color: "yellow",
      fontWeight: "bold",
    },
  },
};