UI: input DEmo

src/components/mui/MyInputCopy.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-05 14:00:37
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-21 17:33:59
+ * @FilePath: /bkunyun/src/components/mui/MyInput.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import TextField, { TextFieldProps } from "@mui/material/TextField";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+
+interface MyInputProps extends Omit<TextFieldProps, "value"> {
+	value?: string;
+	variant?: "standard" | "filled" | "outlined";
+	size?: "small" | "medium";
+	placeholder?: string;
+	fullWidth?: boolean; // 宽度是否和容器一致
+	error?: boolean;
+}
+
+const MyInput = (props: MyInputProps) => {
+	const {
+		size = "medium",
+		placeholder = "请输入",
+		fullWidth = true,
+		error = false,
+		label,
+		...other
+	} = props;
+
+	const theme = createTheme({
+		components: {
+			MuiInputBase: {
+				styleOverrides: {
+					root: {
+						height: "36px",
+						fontSize: "14px",
+						"&.MuiInputBase-sizeSmall": {
+							height: "32px",
+							"& .MuiOutlinedInput-notchedOutline": {
+								// height: "34px",
+							},
+						},
+					},
+				},
+			},
+			MuiInputLabel: {
+				styleOverrides: {
+					root: {
+						// top: label ? "-5px" : "-10px",
+						top: "-9px",
+					},
+					shrink: {
+						top: 0,
+					},
+					sizeSmall: {
+						top: "-5px",
+					},
+				},
+			},
+			MuiOutlinedInput: {
+				styleOverrides: {
+					root: {
+						// height: "36px",
+						// lineHeight: "36px",
+						// paddingRight: "12px",
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
+						":hover": {
+							"& .MuiOutlinedInput-notchedOutline": error
+								? {}
+								: {
+										borderColor: "#1370ff",
+								  },
+						},
+					},
+					input: {
+						padding: "6.5px 12px",
+						verticalAlign: "middle",
+					},
+					// focused: {
+					// 	"&.MuiOutlinedInput-notchedOutline": {
+					// 		borderWidth: "1px",
+					// 	},
+					// },
+					notchedOutline: {
+						// height: "36px",
+					},
+				},
+			},
+			// .css-1lkr5rz-MuiInputBase-input-MuiOutlinedInput-input
+		},
+	});
+
+	return (
+		<ThemeProvider theme={theme}>
+			<TextField
+				error={error}
+				size={size}
+				placeholder={placeholder}
+				fullWidth={fullWidth}
+				label={label}
+				{...other}
+			/>
+		</ThemeProvider>
+	);
+};
+
+export default MyInput;

src/views/mui_demo/input.tsx

 import { memo } from "react";
 import { InputAdornment } from "@mui/material";
 import InputComponent from "@/components/mui/MyInput";
+// import InputComponent from "@/components/mui/MyInputCopy";
 
 const ProjectMembers = () => {
 	return (
@@ -10,6 +11,7 @@ const ProjectMembers = () => {
 				label={"test"}
 				defaultValue={"sssssssss"}
 			/>
+			<InputComponent fullWidth={false} defaultValue={"sssssssss"} />
 			&nbsp;&nbsp;&nbsp;&nbsp;
 			<InputComponent
 				fullWidth={false}
@@ -33,6 +35,7 @@ const ProjectMembers = () => {
 				fullWidth={false}
 				size={"small"}
 				placeholder={"nishuoshenm"}
+				label={"asdasfasf"}
 			/>
 			<br /> <br />
 			<InputComponent fullWidth={true} />