Hello! I have a question about a complete custom d...

# compose

[francisco]

Hello! I have a question about a complete custom design system in compose and OutlinedTextfield component.
My design system calls for custom type for the label composable. I see in the TextFieldImpl that the TextField component animates between MaterialTheme.typography.bodyLarge and MaterialTheme.typography.bodySmall depending if the textfield is focused or not.
My question is, am i able to override these so that I could use my design system types? I have a specific font for bodySmall and bodyLarge, but not sure how to go about setting those if i’m not using the MaterialTheme as my parent compose Theme

@Composable
@Preview
fun TextInputPreview() {
    var text by remember {
        mutableStateOf("")
    }
    TextField(
        value = text,
        onValueChange = { text = it },
        label = {
            Text(
                "My label",
                style = PedalTheme.typography.body // switch between bodySmall or bodyLarge
                )
        }
    )
}

[francisco]

I see there is

ProvideTextStyle

but i believe this is for just one type

[francisco]

I wish i was able to map those missing type styles inside my wrapper composable

[francisco]

Is it possible to wrap the component in my ds theme and the label in material theme?

@Composable
fun TextInputWrapper() {
  PedalTheme {
    TextField(
      value = "test",
      onValueChange = { .. },
      label = {
         MaterialTheme(
           typography = typography(bodyLarge = myTheme.bodyLarge, bodySmall = myTheme.bodySmall) {
         Text(text = "my label")
         }
      }
    }
}

[Colton Idle]

Oh! I think I had to do this. I think I created a one off theme to wrap just around this component, and in there I overrode the bodyLarge and bodySmall and then everything worked perfect