Случайные встроенные стили по умолчанию для ввода html

Question

Я разрабатываю приложение MERN с полным стеком, и при просмотре своего пользовательского интерфейса React в Chrome DevTools обнаружил нечто странное. Я установил, что могло способствовать возникновению этой проблемы:

• Tailwind CSS
• Material UI (установлены только значки, но также @ material-ui / core)

Вот часть моего кода:

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 относятся к классам css попутного ветра. Этот вход является управляемым компонентом через хук 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%;">

По какой-то причине применяется это странное свойство стиля. Это происходит с большинством моих элементов ввода, но не со всеми. Я не могу найти никакой разницы между теми, у кого он есть, и теми, у кого его нет. Может, в этом нет ничего серьезного, но я хотел бы знать, почему это происходит.

Answer 1

Похоже, это расширение диспетчера паролей, которое добавляет к вводимым данным следующий значок.

введите описание изображения здесь

Можете ли вы отключить все свои расширения и посмотреть, изменится ли это?