How to change input text color of fluent ui TextField?

March 16, 2022

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.

>Solution :

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