如何在Jetpack Compose中实现React Material-UI的useStyles样式分离能力

完全可以实现和React Material-UI相近的样式与逻辑分离效果，以下是两种经过实践验证的可行方案：

方案1：CompositionLocal + 样式数据类（最贴近Material-UI使用体验） #

该方案对应Material-UI的makeStyles+useStyles逻辑，支持全局/局部样式覆盖、组件级样式封装，复用性最强：

1. 首先在单独的样式文件中定义样式数据类与共享样式池

// 定义Button组件的样式结构，对应Material-UI里的样式对象
data class ButtonStyles(
    val root: ButtonColors = ButtonDefaults.buttonColors(
        containerColor = Brush.linearGradient(
            colors = listOf(Color(0xFFFE6B8B), Color(0xFFFF8E53))
        )
    ),
    val shape: Shape = RoundedCornerShape(3.dp),
    val elevation: ButtonElevation = ButtonDefaults.buttonElevation(
        defaultElevation = 3.dp,
        pressedElevation = 5.dp
    ),
    val contentPadding: PaddingValues = PaddingValues(horizontal = 30.dp),
    val height: Dp = 48.dp
)

// 定义全局样式提供者，作用类似Material-UI的主题样式注入
val LocalButtonStyles = staticCompositionLocalOf { ButtonStyles() }

2. 封装通用业务组件，内置样式读取逻辑

@Composable
fun StyledButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    // 支持单独传入自定义样式，优先级高于全局样式
    styles: ButtonStyles = LocalButtonStyles.current,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        modifier = modifier.height(styles.height),
        colors = styles.root,
        shape = styles.shape,
        elevation = styles.elevation,
        contentPadding = styles.contentPadding,
        content = content
    )
}

3. 业务代码中使用，完全不用关心样式实现

// 页面级自定义样式，对应Material-UI的useStyles
val customPageButtonStyles = ButtonStyles(
    height = 52.dp,
    contentPadding = PaddingValues(horizontal = 40.dp)
)

@Composable
fun DemoPage() {
    // 局部注入样式，作用域内所有StyledButton自动生效
    CompositionLocalProvider(LocalButtonStyles provides customPageButtonStyles) {
        // 普通按钮直接调用，不需要传样式
        StyledButton(onClick = { /* 业务逻辑 */ }) {
            Text("Hook")
        }
        
        // 特殊样式单独传参即可
        val specialStyle = ButtonStyles(
            root = ButtonDefaults.buttonColors(containerColor = Color.Blue)
        )
        StyledButton(
            onClick = { /* 其他业务逻辑 */ },
            styles = specialStyle
        ) {
            Text("特殊样式按钮")
        }
    }
}

方案2：顶层样式常量/扩展（轻量易维护，适合小型项目） #

如果你不需要全局样式覆盖能力，也可以用更简单的顶层样式封装方式，直接把样式抽离到单独文件：

1. 新建AppStyles.kt统一管理所有样式

object AppStyles {
    val primaryButtonModifier: Modifier
        @Composable
        get() = Modifier
            .height(48.dp)
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(Color(0xFFFE6B8B), Color(0xFFFF8E53))
                ),
                shape = RoundedCornerShape(3.dp)
            )
            .shadow(3.dp, RoundedCornerShape(3.dp))
            .padding(horizontal = 30.dp)
    
    val primaryButtonText: TextStyle
        @Composable
        get() = TextStyle(
            color = Color.White,
            fontSize = 16.sp
        )
}

2. 业务代码直接引用即可

@Composable
fun DemoButton() {
    Button(
        onClick = { /* 业务逻辑 */ },
        modifier = AppStyles.primaryButtonModifier,
        colors = ButtonDefaults.buttonColors(containerColor = Color.Transparent)
    ) {
        Text("Hook", style = AppStyles.primaryButtonText)
    }
}

方案优势 #

• 完全实现UI样式与业务逻辑分离，样式统一维护，修改不需要调整业务代码
• 支持样式复用、局部覆盖，和Material-UI的使用体验基本对齐
• 符合Jetpack Compose声明式特性，无额外性能损耗
• 支持团队分工，设计师可以统一维护样式库，业务开发只需要关注逻辑实现

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