I use some composables from `androidx.compose.material`. I want to re-style/override typography them...

# compose

[Wojciech Rozwadowski]

I use some composables from androidx.compose.material. I want to re-style/override typography theme value used by this component: MaterialTheme.typography.caption. Is this a correct way to do it?

MaterialTheme(
    typography = MaterialTheme.typography.copy(
        caption = MaterialTheme.typography.caption.copy(
            fontSize = 20.sp
        )
    )
) {
    // put material composable here
}

My first though was to use CompositionLocalProvider but LocalTypography has internal visibility modifier 🤔

[Wojciech Rozwadowski]

I want to override BottomNavigation caption text size, which I know I can override by use custom Text style in BottomNavigationItem label argument, but my question is more general

[Louis Pullen-Freilich [G]]

If you want to override the text used in a BottomNavigationItem, you can use:

ProvideTextStyle(newTextStyle) {...}

inside the BottomNavigationItem. Then you could just put this all into your own

@Composable 
fun MyBottomNavigationItem(...) {
    BottomNavigationItem(label = { 
        ProvideTextStyle(newTextStyle) { ... }
    }...)
}

This is what BottomNavigationItem does internally, same with other components that provide a text style

[Louis Pullen-Freilich [G]]

If you want to change the value of caption for some part of the hierarchy, then the snippet you posted is correct - MaterialTheme will use the existing values for colors / shapes in this case

[Wojciech Rozwadowski]

Thanks 🙂

[Wojciech Rozwadowski]

And why

ProvideTextStyle(newTextStyle) { Text("sth") }

in place of

Text("sth", style = newTextStyle)

[Louis Pullen-Freilich [G]]

Either is fine / works, it’s basically the same thing. Text by default will use the value in LocalTextStyle, which is provided by ProvideTextStyle - it just depends at what layer you want to customize this.

If you want to in one specific place change the text style, then you should just do style = newTextStyle

If you want to customize it multiple places and share it across your application, then creating MyBottomNavigationItem and using ProvideTextStyle lets you do that, then you can just write:

MyBottomNavigationItem {
    Text(...)
}

And this will automatically use newTextStyle without you needing to change anything. It also means that if you want to change it in the future, you only need to edit one function, instead of multiple call sites

[mattinger]

The ProvideTextStyle is a very powerful concept. I use this to alter the font, text size, line spacing, etc… for my custom button functions. That way, any Text() items included under buttons are styled right. (I also change the LocalContentColor as well)