如何更改 Fluent ui TextField 的输入文本颜色？

Question

我只想将输入文本颜色更改为另一种颜色。组件示例是：

<TextField
     styles={{
       fieldGroup: {
         borderRadius: 0,
         border: '0px solid transparent',
         background: '#F3F2F1',
       },
       input : {
         color: '#FF0000',
       }
     }}
     placeholder="---------Text----------"
  />

我尝试在 IStyle 对象的描述、错误消息、字段、字段组、图标、前缀、后缀、根、subComponentStyles 和包装器属性上设置颜色属性，但它不起作用.

Answer 1

您需要对代码进行以下更改。在样式内部，使用 field 属性代替 input 来更改输入文本的 css。像这样：

<TextField
        label="Fluent UI TextField"
        styles={{
          fieldGroup: {
            borderRadius: 0,
            border: "0px solid transparent",
            background: "#F3F2F1"
          },
          field: {
            color: "#FF0000"
          }
        }}
        placeholder="---------Text----------"
      />

您提到您已经尝试使用 field 属性但它没有用。我相信一定有其他原因。您可以在下面的代码笔 url 中看到完整的工作代码。您的代码中可能还缺少其他内容（如果是，请分享更多信息）。希望对你有帮助。

codepen 的完整工作代码 - https://codepen.io/AnkitSaxena2605/pen/LYepGxp

如何更改 Fluent ui TextField 的输入文本颜色？

How to change input text color of fluent ui TextField?

reactjs

fluent-ui

fluentui-react