如何修改InputAdornment内部IconButton的尺寸？

你之前尝试的方式没生效，核心是MUI的IconButton与内部图标存在默认样式优先级限制，试试下面几种可行方案：

方案1：使用IconButton内置尺寸属性 #

直接给IconButton设置size属性，MUI提供small/medium/large三个预设值，能快速同步调整按钮与图标的整体尺寸：

<IconButton
  size="small" // 可选small/medium/large
  sx={{ color: "#A9A9A9", mr: -1 }}
  aria-label="toggle password visibility"
>
  <Visibility />
</IconButton>

方案2：自定义尺寸（通过sx覆盖样式） #

如果需要更灵活的自定义大小，在sx中同时调整IconButton的内边距和内部图标的字体大小：

<IconButton
  sx={{
    color: "#A9A9A9",
    mr: -1,
    padding: 0.3, // 缩小按钮内边距，控制按钮整体大小
    '& .MuiSvgIcon-root': {
      fontSize: '1rem' // 直接设置图标的尺寸
    }
  }}
  aria-label="toggle password visibility"
>
  <Visibility />
</IconButton>

方案3：直接给内部图标设置尺寸 #

跳过IconButton的全局设置，直接给Visibility图标添加fontSize属性或sx样式：

<IconButton
  sx={{ color: "#A9A9A9", mr: -1 }}
  aria-label="toggle password visibility"
>
  <Visibility fontSize="small" /> {/* 使用内置尺寸 */}
  {/* 或自定义：<Visibility sx={{ fontSize: '1.1rem' }} /> */}
</IconButton>

修改后的完整示例代码 #

import {
  Grid,
  IconButton,
  InputAdornment,
  Paper,
  TextField,
} from "@mui/material";
import Visibility from "@mui/icons-material/Visibility";
import React from "react";
import PasswordRoundedIcon from "@mui/icons-material/PasswordRounded";

function Login(props) {
  return (
    <div>
      <Paper
        elevation={24}
        sx={{
          width: 275,
          p: 1.5,
          borderRadius: 1.3,
          border: 0,
          backgroundColor: "white",
        }}
      >
        <Grid container justifyContent={"center"} direction={"column"}>
          <Grid container direction={"column"} sx={{ mt: 2 }}>
            <Grid
              container
              direction={"row"}
              alignItems={"flex-end"}
              sx={{ mt: 1.5 }}
            >
              <Grid item xs={"auto"} sx={{ mb: 0.2 }}>
                <PasswordRoundedIcon
                  fontSize="small"
                  sx={{
                    color: "darkgray",
                  }}
                ></PasswordRoundedIcon>
              </Grid>
              <Grid item xs sx={{ pl: 1 }}>
                <TextField
                  fullWidth
                  InputLabelProps={{
                    style: { color: "darkgray", fontSize: ".9em" },
                  }}
                  id="standard-password-input"
                  label="Password"
                  type="password"
                  autoComplete="current-password"
                  variant="standard"
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        <IconButton
                          size="small"
                          sx={{ color: "#A9A9A9", mr: -1 }}
                          aria-label="toggle password visibility"
                        >
                          <Visibility />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}
export default Login;

内容的提问来源于stack exchange，提问作者Abhishek Vyas