I’m confused as how to work with Material theme? ...

# compose

[ursus]

I’m confused as how to work with Material theme?

Say I’m using MD3, but I disagree with the default elevation and round corner of filled card.

I go into sources, I notice elevation = CardDefaults.cardElevation(), shape = CardDefaults.shape

Sure, so I only need to specify

Card(
   elevation = CardDefaults.cardElevation(defaultElevation = 3.dp),
   shape = MaterialTheme.shapes.large
) {
   ...
}

--
But how do I enforce this everywhere?
Should I create MyCard composable with those settings?

Or is there a way to tweak it globally?
What if I want to use all 3 styles of cards in the app (filled, tonal, stroked), do I then need MyTonalCard, MyStrokedCard as well?

[Thomas Richtsfeld]

MaterialTheme has a parameter called shapes . If you want to have the same shape for all your cards, you can just define your own shape for each of the sizes (medium in case of card) and pass it to MaterialTheme . That is exactly what is done here.

For elevation I think it is hardcoded, so you would need to overwrite for each card.
What we do in our company is that we have custom compose functions for each of the basic material components like button, checkbox, progress indicator,… Under the hood we use the material versions of the components. Let’s take the button as an example. We have:
• CompanyButton
• CompanyIconButton
To answer your question, I would say yes. Create your own composable functions for each of those variations and wrap the material component into those or an enum which you pass in to the composable. It depends what you need and it is not much effort to crate those.

It is also a good practice to create your own themed variants of different theme values:

MaterialTheme(colorScheme = DefaultColors, shapes = replyShapes) {
    CompositionLocalProvider(
        LocalCompanyColors provides colors,
        LocalCompanyTypography provides LocalCompanyTypography.current
    ) {
        scope.content()
    }
}