ui: 数据管理中的项目数据表格页样式优化

src/components/mui/MyButton.tsx

@@ -12,9 +12,10 @@ import {
 } from "@mui/material";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 
-interface ButtonTagProps extends  Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, 'text'>{
-	startIcon?: React.ReactNode; /** 开始Icon */
-	endIcon?: React.ReactNode; /** 结束Icon */
+interface ButtonTagProps
+	extends Omit<ExtendButtonBase<ButtonTypeMap<{}, "button">>, "text"> {
+	startIcon?: React.ReactNode /** 开始Icon */;
+	endIcon?: React.ReactNode /** 结束Icon */;
 	text: string; //文本内容
 	variant?: "text" | "contained" | "outlined"; //按钮样式
 	onClick?: any; //点击事件
@@ -22,13 +23,20 @@ interface ButtonTagProps extends  Omit<ExtendButtonBase<ButtonTypeMap<{}, "butto
 	fontSize?: string; //按钮文字大小
 	dropValue?: boolean; //选择的值
 	drop?: boolean; //是否开启选择
-	color?: "inherit" | "primary" | "secondary" | 'success' | 'error' | 'info' | 'warning'; //按钮颜色风格
+	color?:
+		| "inherit"
+		| "primary"
+		| "secondary"
+		| "success"
+		| "error"
+		| "info"
+		| "warning"; //按钮颜色风格
 	size?: "large" | "medium" | "small"; //按钮尺寸
 	disabled?: boolean; //是否禁用
 	style?: any; //按钮自定义样式
 	img?: JSX.Element; //图标按钮中的图标
 	selectCallBack?: (item: any, key: number) => void; //选择按钮的回调
-};
+}
 
 const theme = createTheme({
 	components: {
@@ -36,6 +44,9 @@ const theme = createTheme({
 			styleOverrides: {
 				root: {
 					minWidth: "48px",
+					"&.MuiButton-textError": {
+						color: "rgba(255, 78, 78, 1)",
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -78,7 +89,6 @@ const theme = createTheme({
 					color: "#FF4E4E",
 					"&:hover": { backgroundColor: "#FFEDED " },
 				},
-
 				sizeSmall: {
 					"& p": { fontSize: "12px" },
 					height: "28px",
@@ -113,7 +123,16 @@ const theme = createTheme({
 });
 
 const ButtonComponent = (props: ButtonTagProps) => {
-	const { size, disabled, variant, color, img, select, selectCallBack, ...other } = props;
+	const {
+		size,
+		disabled,
+		variant,
+		color,
+		img,
+		select,
+		selectCallBack,
+		...other
+	} = props;
 	const { classes, cx } = useStyles({});
 	const [anchorEl, setAnchorEl] = React.useState(null);
 

src/components/mui/MyInput.tsx

@@ -34,9 +34,13 @@ const MyInput = (props: MyInputProps) => {
 				styleOverrides: {
 					root: {
 						height: "36px",
-						// width: "40px",
-						// boxSizing: "border-box",
-						// padding: "0",
+						fontSize: "14px",
+						"&.MuiInputBase-sizeSmall": {
+							height: "32px",
+							"& .MuiOutlinedInput-notchedOutline": {
+								height: "34px",
+							},
+						},
 					},
 				},
 			},
@@ -53,6 +57,7 @@ const MyInput = (props: MyInputProps) => {
 					root: {
 						height: "36px",
 						lineHeight: "36px",
+						paddingRight: "12px",
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
 								? {}
@@ -62,7 +67,7 @@ const MyInput = (props: MyInputProps) => {
 						},
 					},
 					input: {
-						padding: "6.5px 14px",
+						padding: "6.5px 12px",
 						verticalAlign: "middle",
 					},
 					notchedOutline: {