mui-demo-project/src/ui/CustomizedInputsStyled.tsx
2024-08-07 16:06:54 +05:30

55 lines
1.2 KiB
TypeScript

"use client"; // Ensure this is at the top of your file
import * as React from "react";
import { styled } from "@mui/material/styles";
import TextField from "@mui/material/TextField";
import Visibility from "@mui/icons-material/Visibility";
import VisibilityOff from "@mui/icons-material/VisibilityOff";
// Define your styled component
const CssTextField = styled(TextField)({
width: "100%",
"& label.Mui-focused": {
color: "var(--primary)",
},
"& .MuiInputBase-root": {
borderRadius: 8,
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "var(--input-border-default)",
},
"&:hover fieldset": {
borderColor: "var(--input-border-hover)",
},
"&.Mui-focused fieldset": {
borderColor: "var(--primary)",
},
},
});
type InputType = {
label: string;
type: string;
endAdornmentBoolean?: React.ReactNode;
};
// Client component
export default function CustomizedInputsStyled({
label,
type,
endAdornmentBoolean,
}: InputType) {
return (
<>
<CssTextField
label={label}
type={type}
id="custom-css-outlined-input"
InputProps={{ endAdornment: endAdornmentBoolean && <VisibilityOff /> }}
/>
</>
);
}