如何在Scaffold中修改Snackbar的TextStyle？

在Jetpack Compose中，要单独修改Snackbar的文本样式而不影响全局的body2和button TextStyle，有两种可行方案：

方案一：自定义Snackbar内容组件 #

直接抛弃Snackbar的默认内容布局，自行构建文本与操作按钮，完全控制样式细节：

Scaffold(
    scaffoldState = scaffoldState,
    snackbarHost = { hostState ->
        SnackbarHost(hostState = hostState) { data ->
            Snackbar(
                snackbarData = data,
                backgroundColor = MaterialTheme.colors.background,
            ) {
                // 自定义消息文本样式
                Text(
                    text = data.message,
                    style = MaterialTheme.typography.body1.copy(
                        color = MaterialTheme.colors.onBackground,
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Medium
                    ),
                    modifier = Modifier.padding(end = 8.dp)
                )
                // 自定义操作按钮样式
                data.actionLabel?.let { label ->
                    TextButton(
                        onClick = { data.performAction() },
                        content = {
                            Text(
                                text = label,
                                style = MaterialTheme.typography.button.copy(
                                    color = MaterialTheme.colors.primary,
                                    fontSize = 13.sp,
                                    fontWeight = FontWeight.Bold
                                )
                            )
                        }
                    )
                }
            }
        }
    }
) { /* 页面内容 */ }

这种方式自由度最高，你可以调整文本的字体大小、颜色、字重，甚至自定义布局结构。

方案二：局部重写MaterialTheme的Typography #

利用Compose的CompositionLocalProvider，在Snackbar的作用域内临时替换body2和button样式，不会影响全局其他组件：

Scaffold(
    scaffoldState = scaffoldState,
    snackbarHost = { hostState ->
        SnackbarHost(hostState = hostState) { data ->
            CompositionLocalProvider(
                LocalTypography provides MaterialTheme.typography.copy(
                    body2 = MaterialTheme.typography.body2.copy(
                        fontSize = 14.sp,
                        color = MaterialTheme.colors.onBackground,
                        fontWeight = FontWeight.Medium
                    ),
                    button = MaterialTheme.typography.button.copy(
                        fontSize = 13.sp,
                        color = MaterialTheme.colors.primary,
                        fontWeight = FontWeight.Bold
                    )
                )
            ) {
                Snackbar(
                    snackbarData = data,
                    backgroundColor = MaterialTheme.colors.background,
                    contentColor = MaterialTheme.colors.onBackground,
                    actionColor = MaterialTheme.colors.primary
                )
            }
        }
    }
) { /* 页面内容 */ }

这种方式适合希望保留Snackbar默认布局，仅修改文本样式的场景，全局的body2和button样式不受影响。

补充说明 #

两种方案都无需修改全局的Type.kt文件，确保其他使用body2和button样式的组件正常工作。根据需求选择即可：需调整布局选方案一，仅修改样式选方案二。

内容的提问来源于stack exchange，提问作者VangelNum