fix: MyButton组件

src/components/mui/MyButton.tsx

+import React, { useCallback } from "react";
+import { makeStyles } from "tss-react/mui";
+import {
+	Typography,
+	Menu,
+	MenuItem,
+	Button,
+	ThemeProvider,
+	createTheme,
+} from "@mui/material";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+
+type ButtonTagProps = {
+	text: string; //文本内容
+	variant?: "text" | "contained" | "outlined"; //按钮样式
+	onClick?: any; //点击事件
+	select?: any[]; //选择按钮的下拉列表
+	fontSize?: string; //按钮文字大小
+	dropValue?: boolean; //选择的值
+	drop?: boolean; //是否开启选择
+	color?: "inherit" | "primary" | "secondary" | undefined; //按钮颜色风格
+	size?: "large" | "medium" | "small"; //按钮尺寸
+	disabled?: boolean; //是否禁用
+	style?: any; //按钮自定义样式
+	img?: JSX.Element; //图标按钮中的图标
+	selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
+};
+
+const theme = createTheme({
+	components: {
+		MuiButton: {
+			styleOverrides: {
+				root: {
+					minWidth: "48px",
+				},
+				contained: {
+					backgroundColor: "#1370FF",
+					"&:hover": {
+						backgroundColor: "#0459D9",
+					},
+				},
+				outlined: {
+					backgroundColor: "#FFFFFF",
+					border: "1px solid #1370FF",
+					boxShadow: "none !important",
+					color: "#1370FF",
+					"&:hover": { backgroundColor: "#ECF4FF " },
+				},
+				text: {
+					backgroundColor: "transparent",
+					boxShadow: "none !important",
+					color: "#1370FF",
+					"&:hover": { backgroundColor: "#ECF4FF " },
+				},
+
+				containedSecondary: {
+					backgroundColor: "#FF4E4E",
+					"&:hover": {
+						backgroundColor: "#FF4E4E",
+					},
+				},
+				outlinedSecondary: {
+					border: "1px solid #FF4E4E",
+					boxShadow: "none !important",
+					color: "#FF4E4E",
+					"&:hover": {
+						backgroundColor: "#FFEDED ",
+						border: "1px solid #FF4E4E",
+					},
+				},
+				textSecondary: {
+					backgroundColor: "transparent",
+					boxShadow: "none !important",
+					color: "#FF4E4E",
+					"&:hover": { backgroundColor: "#FFEDED " },
+				},
+
+				sizeSmall: {
+					"& p": { fontSize: "12px" },
+					height: "28px",
+					padding: "0 12px",
+				},
+				sizeMedium: {
+					"& p": { fontSize: "14px" },
+					height: "32px",
+					padding: "0 16px",
+				},
+				sizeLarge: {
+					"& p": { fontSize: "16px" },
+					height: "36px",
+					padding: "0 16px",
+				},
+			},
+		},
+		MuiPaper: {
+			styleOverrides: {
+				elevation: {},
+			},
+		},
+	},
+});
+
+const ButtonComponent = (props: ButtonTagProps) => {
+	const { size, disabled, variant, color, img, select, selectCallBack } = props;
+	const { classes, cx } = useStyles({});
+	const [anchorEl, setAnchorEl] = React.useState(null);
+
+	const handleClick = useCallback(
+		(event: { currentTarget: React.SetStateAction<null> }) => {
+			setAnchorEl(event.currentTarget);
+		},
+		[]
+	);
+
+	const defaultClick = useCallback((event: { stoppropagation: () => any }) => {
+		event && event.stoppropagation && event.stoppropagation();
+	}, []);
+
+	const handleCloseOption = useCallback(
+		(item: any, key: number) => {
+			setAnchorEl(null);
+			selectCallBack && selectCallBack(item, key);
+		},
+		[selectCallBack]
+	);
+
+	const handleClose = () => setAnchorEl(null);
+
+	return (
+		<ThemeProvider theme={theme}>
+			<Button
+				size={size || "medium"}
+				variant={variant || "contained"}
+				color={color || "primary"}
+				disableRipple={true}
+				disableFocusRipple={true}
+				disabled={disabled || false}
+				style={{ ...props.style }}
+				onClick={props.select ? handleClick : props.onClick || defaultClick}
+			>
+				{img || ""}
+				<Typography style={{ fontSize: props.fontSize }}>
+					{props.text}
+				</Typography>
+				{((props.select && props.select.length > 0) || props.drop) && (
+					<ArrowDropDownIcon
+						classes={{
+							root: cx({
+								[classes.ArrowDropDownIconRoot]: true,
+								[classes.ArrowDropDownIconRootOpen]: Boolean(
+									props.dropValue || anchorEl
+								),
+							}),
+						}}
+					/>
+				)}
+			</Button>
+			<Menu
+				id="simple-menu"
+				anchorEl={anchorEl}
+				keepMounted
+				open={Boolean(anchorEl)}
+				onClose={handleClose}
+			>
+				{select &&
+					select.length > 0 &&
+					select.map((item, key) => {
+						return (
+							<MenuItem
+								key={key}
+								// classes={{ root: classes.menuItemRoot }}
+								onClick={() => handleCloseOption(item, key)}
+							>
+								{item.name || ""}
+							</MenuItem>
+						);
+					})}
+			</Menu>
+		</ThemeProvider>
+	);
+};
+
+const useStyles = makeStyles<{}>()((theme) => ({
+	ArrowDropDownIconRoot: {
+		color: "#8A9099",
+		transition: "all 0.2s !important",
+		transform: "rotate(0)",
+	},
+	ArrowDropDownIconRootOpen: { color: "#8A9099", transform: "rotate(180deg)" },
+}));
+
+export default ButtonComponent;