Hi All. I'm looking for opinions on how people ha...

# compose

[mattinger]

Hi All. I'm looking for opinions on how people handle component based styling (i know material compose does not do this, but it's something that is becoming more common, and is present in material flutter). Basically, instead of directly using design tokens from the theme, there is essentially a style for every component that has a default value in the theme. The construction of the default value can rely on the design tokens in the theme, but don't have to. This has the advantage of allowing us to do a wholesale change of the style without having to change design tokens that may affect other components.

Right now, i have a style object and a composition local for the component:

class MyComponentStyle(...)

val LocalMyComponentStyle = compositionLocalWithComputedDefaultOf {
    val myColors = LocalMyColors.currentValue
    // use the colors here to create a default value
    MyComponentStyle(...)
}

And then in the component, we can use the composition local to get the fully formed style.

My main concern is about the overhead of the composition local instances, and would it be better to have one large structure with all my component configurations, and then select what i want at the point of usage.

class ComponentStyles(
   val myComponent: MyComponentStyle
)

val LocalComponentStyles = compositionLocalWithComputedDefaultOf { ... }

And then later grab it via: LocalComponentStyles.current.myComponent