如何使用MUI TextField组件将密码输入框的圆点改为星号？

首先明确：你修改的SvgIcon.d.ts是TypeScript类型定义文件，仅负责代码的类型校验，完全不会影响页面显示效果，别在这上面浪费时间。

下面是两种可行的解决方法：

方法一：CSS样式覆盖（最快实现） #

MUI密码输入框本质是原生<input type="password">，浏览器默认用圆点隐藏字符，我们可以通过CSS修改显示样式：

import TextField from '@mui/material/TextField';

<TextField
  type="password"
  label="密码"
  InputProps={{
    sx: {
      '& input[type="password"]': {
        // 替换默认圆点为星号的CSS技巧
        fontFamily: 'monospace',
        '-webkit-text-security': 'none',
        textSecurity: 'none',
        color: 'transparent',
        textShadow: '0 0 0 #000',
        letterSpacing: '0.15em',
        // 修复选中样式
        '&::selection': {
          color: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.2)'
        }
      }
    }
  }}
/>

这个方案利用textShadow模拟星号效果，兼容性较好，且不需要修改组件结构。

方法二：自定义密码输入组件（更灵活） #

如果CSS方案满足不了需求，可以封装自定义组件，用星号替代真实输入内容：

import { useState } from 'react';
import TextField from '@mui/material/TextField';

const PasswordField = (props) => {
  const [realValue, setRealValue] = useState('');

  const handleChange = (e) => {
    setRealValue(e.target.value);
    props.onChange?.(e);
  };

  return (
    <TextField
      {...props}
      type="text"
      value="*".repeat(realValue.length)
      onChange={handleChange}
      // 隐藏真实输入框但保留输入功能
      inputProps={{
        style: { position: 'absolute', opacity: 0, zIndex: -1, width: '100%' }
      }}
    />
  );
};

// 使用示例
<PasswordField label="自定义密码框" />

import * as React from 'react';
import { SxProps } from '@mui/system';
import { OverridableStringUnion } from '@mui/types';
import { Theme } from '../styles';
import { OverridableComponent, OverrideProps } from '../OverridableComponent';
import { SvgIconClasses } from './svgIconClasses';

export interface SvgIconPropsSizeOverrides {}

export interface SvgIconPropsColorOverrides {}

export interface SvgIconTypeMap<P = {}, D extends React.ElementType = 'svg'> {
  props: P & {
    /**
     * 传入SVG元素的子节点
     */
    children?: React.ReactNode;
    /**
     * 覆盖或扩展应用于组件的样式
     */
    classes?: Partial<SvgIconClasses>;
    /**
     * 组件颜色
     * 支持默认主题色和自定义主题色，自定义方式可参考官方调色板自定义指南
     * 你可以使用`htmlColor`属性为SVG元素设置color属性
     * @default 'inherit'
     */
    color?: OverridableStringUnion<
      | 'inherit'
      | 'action'
      | 'disabled'
      | 'primary'
      | 'secondary'
      | 'error'
      | 'info'
      | 'success'
      | 'warning',
      SvgIconPropsColorOverrides
    >;
    /**
     * 应用于图标的字体大小，默认24px，可配置为继承父元素字体大小
     * @default 'medium'
     */
    fontSize?: OverridableStringUnion<
      'inherit' | 'large' | 'medium' | 'small',
      SvgIconPropsSizeOverrides
    >;
    /**
     * 为SVG元素设置color属性
     */
    htmlColor?: string;
    /**
     * 如果设为true，根节点将继承自定义`component`的viewBox，同时`viewBox`属性会被忽略
     * 当你引用自定义组件并希望`SvgIcon`将该组件的viewBox传递给根节点时很有用
     * @default false
     */
    inheritViewBox?: boolean;
    /**
     * shape-rendering属性，不同选项的行为可参考MDN文档
     * 如果图标显示模糊，你可以尝试调整这个属性
     */
    shapeRendering?: string;
    /**
     * 系统属性，允许定义系统覆盖样式以及额外的CSS样式
     */
    sx?: SxProps<Theme>;
    /**
     * 为包含该元素的组件提供可读的标题，符合SVG无障碍访问规范
     */
    titleAccess?: string;
    /**
     * 允许重新定义SVG元素内无单位坐标的含义
     * 例如，如果SVG元素宽500高200，你传入viewBox="0 0 50 20"，
     * 意味着SVG内部的坐标将从左上角(0,0)到右下角(50,20)，每个单位相当于10px
     * @default '0 0 24 24'
     */
    viewBox?: string;
  };
  defaultComponent: D;
}
/**
 *
 * 官方示例：
 * - 图标组件示例
 * - Material图标示例
 *
 * API文档：
 * - SvgIcon官方API文档
 */
declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & { muiName: string };

export type SvgIconProps<
  D extends React.ElementType = SvgIconTypeMap['defaultComponent'],
  P = {},
> = OverrideProps<SvgIconTypeMap<P, D>, D>;

export default SvgIcon;

内容的提问来源于stack exchange，提问作者Marko K