androidandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-textfield

Jetpack Compose - TextField colors paramater not working


In a new Android Compose project using material3, I'm trying to set focusedLabelColor of OutlinedTextField as follows but it didn't work unless setting color on Text.

      OutlinedTextField(
        label = { Text("Label") },
        colors = OutlinedTextFieldDefaults.colors(
          focusedLabelColor = Color.Blue,
          focusedTextColor = Color.Red
        ),
        value = "",
        onValueChange = {}
      )

I tired setting colors for TextField and it didn't work too.


Solution

  • After discovering through testing that setting text colors in the typography of MaterialTheme would invalidate LocalContentColor, I removed them as shown in the following code. As a result, not only does LocalContentColor work properly now, but the colors parameter of TextField also functions correctly.

    If you set colors on Typography, these colors from styles already bound to certain parts of Material components, such as TextField, will take precedence over the colors parameter of TextField or LocalContentColor

        MaterialTheme(
          colorScheme = colorScheme,
          typography = Typography(
            bodyMedium = TextStyle(
              color = Color.Black  // removed
            ),
            // ...
          ),
          content = content
        )