How to change TextStyle in Snackbar with Scaffold?

Question

Don't understand how to assign text style to Snackbar

 Scaffold(
        scaffoldState = scaffoldState,
        snackbarHost = { hostState ->
            SnackbarHost(hostState = hostState) { data ->
                Snackbar(
                    snackbarData = data,
                    backgroundColor = MaterialTheme.colors.background,
                    contentColor = MaterialTheme.colors.onBackground,
                    actionColor = MaterialTheme.colors.primary
                )
            }
        },

scope.launch {
    val result = scaffoldState.snackbarHostState.showSnackbar("Removed from favourites","Cancel")

    when(result) {
        SnackbarResult.ActionPerformed -> {
            viewModelForFavourite.addFavouritePhoto(FavouritePhotosEntity(url = photoUrl))
        }
        else -> Unit
    }
}

i found that Snackbar used body2 TextStyle and button TextStyle in file Type.kt but so many actions i used this two, how i can override this in snackBar?

Answer 1

Can we use do as mentioned below

From

SnackbarHost(hostState = hostState) { data ->
                Snackbar(
                    snackbarData = data,
                    backgroundColor = MaterialTheme.colors.background,
                    contentColor = MaterialTheme.colors.onBackground,
                    actionColor = MaterialTheme.colors.primary
                )
            }

To

SnackbarHost(hostState = hostState) { data ->
                Snackbar(
        modifier = Modifier.padding(4.dp),
        action = {
            TextButton(onClick = {}) {
                Text(text = data.message)
            }
        }
    ) {
        Text(text = "This is a basic Snackbar with action item",)
    }
            }

if yes then we must have control over Text to make changes as per our requirement

Answer 2

You can use the Snackbar composable with the action and the content as parameter. In this way you can customize the message and the action.

Something like:

    snackbarHost = {

        SnackbarHost(it) { data ->
            // custom snackbar
            Snackbar(
                modifier = Modifier.padding(8.dp),
                action = {
                    TextButton(
                        colors = ButtonDefaults.textButtonColors(contentColor = Yellow),
                        onClick = { },
                        content = {
                            Text(
                                "Action",
                                style = TextStyle(fontSize = 14.sp),
                                textDecoration = TextDecoration.Underline
                            )
                        }
                    )
                }
            ) {
                Row() {
                    Icon(Icons.Filled.Warning, "", Modifier.padding(end = 8.dp), tint = Yellow)
                    Text(
                        "snackbarData.message",
                        style = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Bold),
                    )
                }
            }
        }
    }