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

发布于 2025-01-14 22:25:28 字数 436 浏览 5 评论 0原文

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

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

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

原文

I simply want to change the input text color to another one.
Component example is:

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

I have tried to set the color property on description, errorMessage, field, fieldGroup, icon, prefix, suffix, root, subComponentStyles, and wrapper properties of the IStyle object, but it doesn't work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

撕心裂肺的伤痛 2025-01-21 22:25:28

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

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

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

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

You need to do the following change in your code. Inside styles, instead of input use field property to change css for input text. Like this:

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

You metioned that you already tried using the field property but it didn't work. I believe there must be some other reason for that. You can see the full working code in the below codepen url. May be there's something else missing in your code (if so please share more info) . Hope it helps.

Full working code at codepen - https://codepen.io/AnkitSaxena2605/pen/LYepGxp

回复收藏 0 原文

~没有更多了~