I have been developing an internal web app for my job using react, typescript, and material-ui. One of the requested features was a dark theme, which seemed easy with material-ui, just provide some colors and a button to switch between light and dark. It works great in Firefox, but when I tested in Chrome, I discovered that some of the elements receive user agent style sheets that seemingly can't be overridden. For example, on the login page:
There is text in the password box right now, but it's virtually invisible because chrome insists on forcing the css
input:-internal-autofill-selected {
appearance: menulist-button;
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
}
It appears as if Chrome is trying to style things for me based on my OS's preference, completely ignoring all of the CSS I've applied on top of the element. I can get it to go away by telling chrome to not autocomplete these fields, but then I lose the ability to autocomplete logins, which is very much used by our users. This also gets applied to the username input field, but it was hard to show that behavior without showing a real username. Similarly, the user agent style only gets applied when Chrome is trying to fill in the login for me.
Interestingly, if I manually edit the text in either field (as you can see with the username field), it styles correctly, but as soon as Chrome tries to autocomplete it the user agent styles get applied. This has a rather jarring effect, and renders the inputs impossible to read.
I've found numerous posts saying this is a long standing problem with Chrome that the devs have refused to change for years, and some possible fixes that I haven't been able to get working, or not working fully.
Is there a way to disable these annoying user agent stylesheets? If there isn't, is there a way to reliably override them? I have attempted to apply additional CSS, using a separate class and through applying the styling directly to the <input> element, but chrome still overrides my styles like they're not even there.
My HTML looks like
<form class="MuiCardContent-root makeStyles-inputs-4" autocomplete="chrome-off">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
data-shrink="true">
Username
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl">
<input aria-invalid="false" type="text" class="MuiInputBase-input MuiInput-input makeStyles-input-5"
value="username">
</div>
</div>
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
data-shrink="true">
Password
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl">
<input aria-invalid="false" autocomplete="false" type="password"
class="MuiInputBase-input MuiInput-input makeStyles-input-5" value="password">
</div>
</div>
</form>