https://kotlinlang.org logo
Join Slack
Powered by
Is it possible to set in a `MaterialTheme` a separ...
# compose
l
Is it possible to set in a 
MaterialTheme
a separate 
typography
for a 
TextButton
? Currently there is only 
typography.button
. But in our design the regular 
Button
uses a different text color than a 
TextButton
.
j
If none of the other typography definitions align with it, I’ve done something similar with colors by creating an extension on MaterialTheme.Colors. You could do the same thing for typogrophy. Not sure if there’s a better way to do this, though.
c
l
But isn't the text style "hardcoded" in the 
Button
composable?
That means it will always take 
typography.button
and I cannot have different typographies for a 
TextButton
and a button with filled background.
c
Other alternatives: • Pass different colors via the 
colors
parameter • Override all styles by passing a textStyle in the Text composable within the Button content slot
l
Yes, but then I have to pass it to every 
TextButton
. I was hoping the MaterialTheme supports such differentiation but looks like it doesn't.
Maybe the best option is to create a custom 
TextButton
with the appropriate color.
j
I’ve accomplished this by wrapping my buttons in my own composable that provides the common styles I want
➕ 1
l
Yes, looks like that's the best way.
Thank you all for your quick and helpful answers! 🙏
c
Yes, that is what I would suggest. The beauty of Compose is easily being able to wrap things and customize for reuse
🙌 3
FWIW 
MaterialTheme.typography.button
doesn’t have a color in the style
l
But we override it with a TextStyle which has a color.
c
Yes. I mention it though because if you want to change just color of a Material TextButton, then the colors parameter is the way to go. If you want to change more than just color, pass the custom style to the Text child Composable. And if you want to change the overall look and feel of the TextButton beyond Material Design specs, I’d suggest recreating it. All that said, there is not necessarily a best option because it depends on what you are trying to achieve with your design system, but know that Compose gives you the flexibility to do all of these options easily.
l
Yes, we set both a custom font and color.
We were able to achieve it very easily by extending the 
MaterialTheme
and assigning custom `TextStyle`s as needed. The only problem was that the 
MaterialTheme
doesn't differentiate between a 
Button
and 
TextButton
style out-of-the-box.
✔️ 1
Also it's unclear to me how the 
Button
styling actually works. So I can pass 
colors
to a 
Button
, but won't they get overridden by the theme typography through 
ProvideTextStyle
? What's the precedence here?
Ok, it looks like it's the other way around - whatever colors I pass to the button explicitly will override the ones from the theme (
ProvideTextStyle
only provides style for what's missing).
c
Yes, 
ProvideTextStyle
is there to make any Text within the Button hierarchy look consistent if the user doesn’t pass an explicit style to them within the contents of the Button. But if you do pass your own style, it will override 
ProvideTextStyle
/ 
CompositionLocal
since it’s the closest resolved style in the hierarchy:
Copy code
Button(onClick = { ... }) {
    Text(style = customStyle)
}
On the decision to design it this way, @Louis Pullen-Freilich [G] can provide more insight
There’s also this article written by Louis that actually uses Button as the API design example: https://medium.com/androiddevelopers/pushing-the-right-buttons-in-jetpack-compose-124cb4b17197
I would also say that the approach with 
Typography
in 
MaterialTheme
is that even though you can put colors in a 
TextStyle
we chose not to since the Material Design spec decouples colors from type
3 Views
Open in Slack
PreviousNext
Powered by