Skip to content

Instantly share code, notes, and snippets.

@kaiomagalhaes
Created July 22, 2023 20:15
Show Gist options
  • Save kaiomagalhaes/8aa062bbd838093eca44b21afe9836e0 to your computer and use it in GitHub Desktop.
Save kaiomagalhaes/8aa062bbd838093eca44b21afe9836e0 to your computer and use it in GitHub Desktop.
mui
// 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",
},
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment