material-ui [输入装饰] TextField自动填充背景颜色未应用于InputAdornment,

qyuhtwio  于 5个月前  发布在  其他
关注(0)|答案(7)|浏览(89)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

当前行为 😯

自动填充的文本字段的InputAdornment与TextField的颜色不同。

预期行为 🤔

我希望InputAdornment与TextField具有相同的背景颜色。

重现步骤 🕹

  1. <TextField
  2. id="password"
  3. type={showPassword ? 'text' : 'password'}
  4. label="Password"
  5. placeholder="Password"
  6. autoComplete="current-password"
  7. InputProps={{
  8. endAdornment: (
  9. <InputAdornment position="end">
  10. <IconButton aria-label="toggle password visibility" onClick={togglePassword} edge="end">
  11. {showPassword ? <VisibilityOff /> : <Visibility />}
  12. </IconButton>
  13. </InputAdornment>
  14. )
  15. }}
  16. />

步骤:

  1. 已保存凭据
  2. 刷新页面以触发自动填充

上下文 🔦

可能是我的问题,但由于缺少背景颜色,该字段看起来有缺陷。

你的环境 🌎

npx @mui/envinfo

  1. System:
  2. OS: Windows 10 10.0.19042
  3. Binaries:
  4. Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
  5. Yarn: Not Found
  6. npm: 8.12.1 - C:\Program Files\nodejs\npm.CMD
  7. Browsers:
  8. Chrome: 103.0.5060.114
  9. Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
  10. npmPackages:
  11. @emotion/react: ^11.8.2 => 11.9.3
  12. @emotion/styled: ^11.8.1 => 11.9.3
  13. @mui/base: 5.0.0-alpha.85
  14. @mui/icons-material: ^5.5.1 => 5.8.4
  15. @mui/material: ^5.7.0 => 5.8.4
  16. @mui/private-theming: 5.8.4
  17. @mui/styled-engine: 5.8.0
  18. @mui/system: 5.8.4
  19. @mui/types: 7.1.4
  20. @mui/utils: 5.8.4
  21. @mui/x-data-grid: ^5.10.0 => 5.12.1
  22. @mui/x-date-pickers: ^5.0.0-alpha.2 => 5.0.0-alpha.6
  23. @types/react: ^18.0.12 => 18.0.12
  24. react: ^18.2.0 => 18.2.0
  25. react-dom: ^18.2.0 => 18.2.0
  26. typescript: ^4.7.3 => 4.7.3
nwsw7zdq

nwsw7zdq1#

实际输入没有覆盖装饰物后面的区域,所以当浏览器为自动填充的字段设置背景时,它不会延伸到装饰物。当CSS has()选择器有更好的支持(这应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它,如下所示:

  1. input:-webkit-autofill,
  2. .MuiInputBase-root:has(> input:-webkit-autofill) {
  3. background-color: blue;
  4. }
li9yvcax

li9yvcax2#

实际输入没有覆盖装饰物后面的区域,所以当浏览器为自动填充的字段设置背景时,它不会延伸到装饰物。当CSS has()选择器有更好的支持(应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它,如下所示:

  1. input:-webkit-autofill,
  2. .MuiInputBase-root:has(> input:-webkit-autofill) {
  3. background-color: blue;
  4. }

是否有方法可以通过styleOverride在主题中实现这一点?

wooyq4lh

wooyq4lh3#

实际输入没有覆盖装饰物后面的区域,所以当浏览器为自动填充的字段设置背景时,它不会延伸到装饰物。当CSS has()选择器有更好的支持(应该很快),你可以尝试通过在自己的CSS中设置根元素的背景颜色来绕过它,如下所示:

  1. input:-webkit-autofill,
  2. .MuiInputBase-root:has(> input:-webkit-autofill) {
  3. background-color: blue;
  4. }

是否有方法可以通过styleOverride在主题中实现这一点?

  1. MuiInputBase: {
  2. styleOverrides: {
  3. root: {
  4. "&:has(> input:-webkit-autofill)": {
  5. backgroundColor: "blue",
  6. },
  7. },
  8. },
  9. },
展开查看全部
csga3l58

csga3l584#

是否有官方的解决方案或更新?

z3yyvxxp

z3yyvxxp5#

是否有官方的解决方案或更新?
只有通过控制 autoComplete 属性
例如:InputProps={{ autoComplete: 'new-password' }}
参考MUI文档

hwazgwia

hwazgwia6#

在尝试将TextField的startAdornment背景颜色调整为1password的自动填充背景颜色时遇到了这个问题。我成功地对其进行了微调,专门针对1password的自动填充数据属性。
虽然有点小众,但还是把它放在这里,以便将来能节省别人的时间。
作为上述解决方案的一个附加类:

  1. .MuiInputBase-root:has(> input[data-com-onepassword-filled="light"]) {
  2. background-color: rgb(219, 237, 255);
  3. }

在sx prop中:

  1. <TextField
  2. ...
  3. sx={{
  4. "& .MuiOutlinedInput-root": {
  5. "&:has(> input[data-com-onepassword-filled=\"light\"])": {
  6. backgroundColor: "rgb(219, 237, 255)",
  7. }
  8. }
  9. ...
  10. }}
  11. />

结果可以在上面的TextField中显示,与下面的没有它的TextField进行比较:

展开查看全部
w8f9ii69

w8f9ii697#

我认为我已经找到了解决这个问题的完整方案。首先让我们了解一下它是如何工作的,以便根据需要进行修改。

它实际上是什么

自动填充字段上的蓝色背景颜色是浏览器的一个功能,特别是来自Chrome的功能。你可以使用 :-webkit-autofill 伪类选择器来覆盖它。

我们如何编辑它?

使用全局CSS覆盖。

在你的全局CSS文件中添加以下代码以更改颜色:

  1. input:-webkit-autofill,
  2. input:-webkit-autofill:hover,
  3. input:-webkit-autofill:focus,
  4. input:-webkit-autofill:active {
  5. -webkit-box-shadow: 0 0 0 30px #fa0000 inset !important;
  6. }

在MUI中覆盖全局主题(推荐)

你可以按照mui文档中的说明来覆盖mui文档中的全局主题
在大多数情况下,你会使用 CSSBaseLine 。因此,这是我在主题配置中实现的解决方案:

  1. const theme = createTheme({
  2. components: {
  3. MuiCssBaseline: {
  4. styleOverrides: `
  5. input:-webkit-autofill,
  6. input:-webkit-autofill:hover,
  7. input:-webkit-autofill:focus,
  8. input:-webkit-autofill:active {
  9. -webkit-box-shadow: 0 0 0 30px #fa0000 inset !important;
  10. }`,
  11. },
  12. },
  13. });
展开查看全部

相关问题