::-ms-revealをMUIのTextFieldで消す方法

個人的には余計なお世話と思ってしまったが、Edge,IE11ではInputのTypeがpasswordである場合、独自にパスワード表示アイコンを実装していても、ブラウザが勝手に表示アイコンを保管してしまって、UI上ダブって見えてしまうことがある。
（右目が実装したもので、左目がブラウザが保管したもの）

プロジェクトではReactとMUIを利用していることもあり、MUIコンポーネントへのスタイルの当て方を調べていて、Globalのスタイルを調整する方法があった。

ただ個別のコンポーネントに対してのみにスタイルを当てたいこともあり、MUIのスタイル指定で解決する方法を模索していたところ、
以下の記事が参考になったため、サンプルコードと共に記載する。

<TextField
  label="Password"
  id="password"
  value="passwordValue"
  type={showPassword ? 'password' : 'text'}
  onChange={onChange}
  size="small"
  InputLabelProps={{
    shrink: true,
    style: { color: 'red' },
    }}
  error={isError}
  InputProps={{
    endAdornment: ( // パスワード表示非表示のアイコンの切り替え実装部分
        <InputAdornment position="end">
          <IconButton onClick={onChangePasswordVisibility} edge="end">
            {showPassword ? <Visibility /> : <VisibilityOff />}
          </IconButton>
        </InputAdornment>
        ),
        }}
  sx={{
  "& input[type=password]::-ms-reveal": { display: "none", width: 0, height: 0 }, // ここ！！
  "& input[type=password]::-ms-clear": { display: "none", width: 0, height: 0 }, // 念のため！
              }}
              />