javascript - 设置占位符的 css 样式

Question

这个问题已经有答案了:

Change an HTML input's placeholder color with CSS (42 个回答)

已关闭 4 年前。

• 我正在尝试设置占位符的 CSS 样式。
• 所以我在输入类中给了红色
• 但它仍然没有改变。
• 我研究并找到了这个链接Styling the placeholder in a TextField
• 但还是没有运气
• 你能告诉我如何解决这个问题吗？
• 在下面提供我的代码片段和沙箱。

https://codesandbox.io/s/material-demo-iw4gr

input: {
    marginLeft: 8,
    flex: 1,
    "&::placeholder": {
      // fontSize: '14 !important',
      color: "red"
    }
  },

  <InputBase
          className={classes.input}
          placeholder="Search Google Maps"
          inputProps={{ "aria-label": "Search Google Maps" }}
        />

Answer 1

您应该使用 classes 属性来覆盖 InputBase 组件的默认样式，而不是使用 className 属性。

我认为 className 在这种情况下不起作用的原因是 className 仅针对包装元素的样式，而 classes 将允许您完全覆盖 InputBase 的特定元素，例如 input 本身。您可以在 here 上的文档中阅读更多相关信息。 .

<InputBase
  classes={{
    input: classes.input,
  }}
  placeholder="Search Google Maps"
/>

我已经为您复制了一个演示here .