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.
CodePudding user response:
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