Html 防止Chrome弄乱CSS样式

我一直在使用react、typescript和MaterialUI为我的工作开发一个内部web应用程序。其中一个要求的功能是一个黑暗的主题，这似乎很容易与材料用户界面，只是提供了一些颜色和按钮之间切换光明和黑暗。它在Firefox中工作得很好，但当我在Chrome中测试时，我发现一些元素接收到的用户代理样式表似乎无法覆盖。例如，在登录页面上：

现在密码框中有文本，但实际上是看不见的，因为chrome坚持强制使用css

input:-已选择内部自动填充{
外观：菜单列表按钮；
背景色：rgb（232、240、254）！重要；
背景图像：无！重要；
颜色：-内部亮-暗（黑、白）！重要；
}

似乎Chrome正试图根据我的操作系统偏好为我设计样式，完全忽略了我在元素顶部应用的所有CSS。我可以告诉chrome不要自动完成这些字段，这样我就失去了自动完成登录的能力，这是我们的用户经常使用的。这也适用于用户名输入字段，但如果不显示真实用户名，则很难显示该行为。类似地，用户代理样式仅在Chrome尝试为我填写登录时应用

有趣的是，如果我手动编辑任一字段中的文本（如您在用户名字段中看到的），它的样式会正确，但一旦Chrome尝试自动完成，就会应用用户代理样式。这会产生相当不和谐的效果，使输入无法读取

我发现很多帖子都说这是Chrome的一个长期问题，开发人员多年来一直拒绝改变，还有一些可能的修复方法，我没有能够工作，或者不能完全工作

有没有办法禁用这些恼人的用户代理样式表？如果没有，是否有可靠的方法覆盖它们？我尝试使用一个单独的类并通过将样式直接应用到

元素来应用额外的CSS，但是chrome仍然覆盖我的样式，就像它们根本不存在一样

我的HTML看起来像

用户名
密码