css - 如何防止表单自动填充软件/浏览器扩展（例如 Dashlane）干扰 HTML 元素的样式？

Question

我正在为我的一个项目开发 TypeScript/ReactJS 前端，并注意到我的个人数据管理器 Dashlane 干扰了自定义Input组件的显示。

在下面的示例中，Dashlane 自动填充表单，更改组件<input>内 HTML 标记的背景颜色Input，并导致应用程序出现意外行为。

一个应该看起来像这样的字段：

显示如下：

有没有办法防止这些个人数据管理器，不仅仅是 Dashlane，而是所有表单自动填充软件/浏览器扩展干扰 React 应用程序的显示行为？我希望用户能够使用这些扩展，但我不希望他们修改我页面上的样式。

- 更新 -

正如@lawrence-witt 所问，以下是在使用 Dashlane 填充字段之前和之后应用于元素的样式：

#before {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  font-family: "Roboto Slab",serif;
  flex: 1;
  border: 0;
  background: transparent;
  color: #f4ede8;
}

#after {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  font-family: "Roboto Slab",serif;
  flex: 1;
  border: 0;
  background: transparent;
  background-color: rgb(255, 255, 204);
  color: rgb(0, 0, 0);
}

标签： cssstyled-componentsautofill