TextField unable to change color Jetpack Compose

Question

I don't know what happened even though I copy exactly the code from Android Developer Team official Youtube. The textfield turns red BUT when I remove color = Color.black in SearchBarcomposable, everything works fine. Help me

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MySootheApp()
        }
    }
}


@Composable
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        color = Color.Black,
        leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
        placeholder = { Text(text = "Search Here") },
        modifier = Modifier
            .heightIn(min = 56.dp)
            .fillMaxWidth(),

    )
}

I have tried to remove color = Color.Black and it works fine

Answer 1

You can manage color of TextField like this in jetpack compose

TextField(
   ...
   textStyle = TextStyle(color = Color.Blue) 
)

Answer 2

Your TextField background shows red because you wrap the SearchBar composable using Surface composable. Which take Surface color of red set on theme.kt file.

If you want to change background color of TextField .

TextField(
            value = "",
            onValueChange = {},
            colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Blue ),
            leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
            modifier = Modifier
                .height(56.dp)
                .fillMaxWidth(),
        )

Answer 3

If you want to change the color in the M2 TextField you can use:

TextField(
    //...
    colors = TextFieldDefaults.textFieldColors(textColor = Black)
 )

The color attribute doesn't exist in the TextField.