CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-textfield
Inori
Inori

Reputation: 31

Jetpack Compose - TextField colors parameter 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, either.

Upvotes: 1

Views: 85

Answers (2)

Inori
Inori

Reputation: 31

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
    )

Upvotes: 1

tyg
tyg

Reputation: 15753

This seems to be a bug that is fixed in version 1.4.0 of Compose Material 3.

At the time of writing that version is still in alpha. If you don't want to wait for the stable version to be releaseed you can change from the stable Compose BOM androidx.compose:compose-bom to the newest alpha BOM androidx.compose:compose-bom-alpha (version 2024.12.01 at the time of writing) to use the alpha version of Compose instead.

Upvotes: 0

Related Questions