占位符不透明度在 mui React 中被覆盖。占位符未显示在 mui 文本字段中

Question

我正在使用 mui React 中的填充变体 Texfield，我使用主题组件对其进行了修改，但占位符在未聚焦时被隐藏。

我使用了很多方法来改变不透明度，但它默认设置为零，并由 mui 本身使用重要标签。无论我用什么来改变不透明度，它都会被忽略并使用 mui 中的默认值。谁能帮我解决这个问题。

覆盖不透明度的类是：-

label[data-shrink=false]+.MuiInputBase-formControl .mui-szobsr-MuiInputBase-input-MuiFilledInput-input::-webkit-input-placeholder

我想让占位符始终可见，就像这样

Answer 1

查看您的代码会更有帮助，因为我不太清楚您如何构建组件。但是，如果您想覆盖

TextField

占位符的默认不透明度，您可以尝试如下操作：

<TextField
  placeholder='Whatever you want'
  variant='filled'
  inputProps={{
    sx: {
      '::placeholder': {
        color: ({ palette }: Theme) => palette.text.secondary,
        opacity: 1
      }
    }
  }}
/>

sx

是 MUIv5 的一个非常酷的功能，它可以让您以主题友好的方式设置组件的样式。您可以将不透明度设置为您想要的任何值，关键是在

sx

的

inputProps

属性中使用

TextField

属性。您也可以只使用

sx

的

TextField

属性，但随后您必须通过一些嵌套的 css 选择器来定位该

.MuiInputBase-input

类，然后覆盖它，所以在我看来，这要容易得多！