如何将muiotpinput组件的椭圆OTP输入框修改为矩形？

要解决muiotpinput输入框默认椭圆的问题，核心是覆盖组件内部输入框的border-radius属性，以下是几种靠谱的实现方式：

• 通过组件自带的TextFieldProps定制样式
  muiotpinput内部基于Material UI的TextField实现，直接通过TextFieldProps传入自定义样式就能精准控制每个输入框的形状：

  import MuiOtpInput from 'mui-one-time-password-input';
  
  function OtpComponent() {
    return (
      <MuiOtpInput
        length={6}
        TextFieldProps={{
          sx: {
            '& input': {
              borderRadius: 0, // 关键：移除圆角，改为矩形
              width: '55px',
              height: '55px',
              textAlign: 'center',
              padding: '0', // 可选：调整内边距避免内容偏移
              border: '1px solid #e0e0e0' // 可选：自定义边框样式
            },
            '& fieldset': {
              borderRadius: 0 // 同步覆盖TextField外层容器的圆角
            }
          }
        }}
      />
    );
  }
  

• 用CSS类名强制覆盖样式
  如果组件默认样式优先级过高，可通过自定义CSS类名强制修改：
  先在CSS文件中添加：

  .custom-otp-input input {
    border-radius: 0 !important;
    width: 55px;
    height: 55px;
  }
  
  .custom-otp-input fieldset {
    border-radius: 0 !important;
  }
  

  再给组件绑定类名：

  <MuiOtpInput
    length={6}
    className="custom-otp-input"
  />
  

• 排查全局主题冲突
  如果项目中配置了Material UI全局主题，且主题的shape.borderRadius设置了较大值，会影响所有TextField组件。这种情况下，只需在TextFieldProps的sx中显式设置borderRadius: 0即可覆盖全局配置。

内容的提问来源于stack exchange，提问作者Ashutosh Nayak