html 输入的随机默认内联样式

Random default inline styles for html input

我正在开发一个全栈 MERN 应用程序,在 Chrome DevTools 中查看我的 React UI 时我遇到了一些奇怪的事情。

如果这些是一个因素,我安装的一些依赖项可能会导致此问题:

这是我的一些代码:

import React, { useReducer } from 'react';

const initialState = { name: '' };

function reducer(state, { field, value }) {
  return {
    ...state,
    [field]: value
  };
}

export default ProfileForm() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleChange = e =>
    dispatch({ field: e.target.name, value: e.target.value });

  const { name } = state;

  return (
    <input
      className='placeholder-gray-400 text-teal-500 outline-none'
      type='text'
      name='name'
      id='name'
      placeholder='Your Name'
      value={name}
      onChange={handleChange}
    />
  )

className 字符串值引用了 tailwindcss 类。此输入是通过 Reactjs useReducer 挂钩控制的组件。我没有使用 useState,因为我还有许多其他需要控制的输入字段。

当我使用 Chrome DevTools 在浏览器中查看此组件时,显示:

<input
  class="placeholder-gray-400 p-2 outline-none"
  type="email"
  name="email"
  id="email"
  placeholder="Email"
  value=""
  style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">

出于某种原因,这种奇怪的样式 属性 正在被应用。它发生在我的大部分输入元素上,但不是全部。我找不到有和没有的区别。也许这不是什么严重的事情,但我想知道为什么会这样。

它看起来是一个密码管理器扩展程序,可以将以下图标添加到您的输入中。

您能否禁用所有扩展程序并查看是否会改变它?