I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to solve this issue by applying the following code to the sx:
.MuiInputLabel-outlined": transform: "translateY(-50%)"
Unfortunately, this caused the label to be displaced from the input field and shifted to the left. Is there a more effective approach to address this problem? Below is my code with only the TextField height adjusted and without any translateY implementation. It's important to note that I have not made any changes to the Password TextField yet.
<Box sx={{marginTop: "3rem"}}>
<TextField type="Email"
label="Email"
variant="outlined"
value={loginEmail ? loginEmail : ""}
name="Email"
onChange={(e) => {
setloginEmail(e.target.value);
}}
sx={{
width: "100%",
maxWidth: "400px",
marginBottom: "0.5rem",
background: "transparent",
borderColor: "#ccc", // Setting a lighter border color
color: "#aaa", // Modifying the label text color to be lighter
"& .MuiInputLabel-outlined": {
color: "#aaa !important", // Adjusting the outline color of the label to be lighter
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#ccc",
},
"& .MuiOutlinedInput-input": {
color: "#aaa", // Changing the input text color to be lighter
height:17
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "#946bde",
},
}}
inputProps={{
style: {
color: "#aaa", // Adjusting the input text color to be lighter
},
}}
/>
<TextField
label="Password"
type={showPassword ? 'text' : 'password'}
variant="outlined"
value={loginPassword ? loginPassword : ""}
name="password"
onChange={(e) => {
setLoginPassword(e.target.value);
}}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => setShowPassword(!showPassword)}
onMouseDown={(e) => e.preventDefault()}
edge="end"
style={{ color: "#aaa" }}
sx={{
transform: 'translateY(-17%)',
}}
>
{showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlinedIcon />}
</IconButton>
</InputAdornment>
),
}}
sx={{
width: "100%",
marginTop: "2rem",
maxWidth: "400px",
marginBottom: "0.5rem",
background: "transparent",
borderColor: "#ccc", // Setting a lighter border color
color: "#aaa", // Modifying the label text color to be lighter
"& .MuiInputLabel-outlined": {
color: "#aaa !important", // Adjusting the outline color of the label to be lighter
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#ccc",
},
"& .MuiOutlinedInput-input": {
color: "#aaa", // Changing the input text color to be lighter
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "#946bde",
},
}}
inputProps={{
style: {
color: "#aaa", // Adjusting the input text color to be lighter
},
}}
/>
</Box>