Jetpack Compose中自定义Typography对Text组件不生效如何解决

问题表现：自定义Typography的subtitle1样式未对Text组件生效，配置与效果如下：

• 自定义配置：
  

subtitle1 = TextStyle(
    fontFamily = FontFamily.Monospace,
    fontWeight = FontWeight.Bold,
    fontSize = 30.sp,
)

• 调用代码：

Text(text = "Homemade veg pizza", style = MaterialTheme.typography.subtitle1)

• 实际效果：
  

绝大多数情况下样式不生效是因为自定义的Typography实例没有正确传入全局MaterialTheme的配置参数中，正确配置流程如下：

步骤1：构造完整的自定义Typography实例 #

将自定义的TextStyle配置传入Typography构造函数生成独立实例：

val MyCustomTypography = Typography(
    subtitle1 = TextStyle(
        fontFamily = FontFamily.Monospace,
        fontWeight = FontWeight.Bold,
        fontSize = 30.sp,
    )
    // 其余需要自定义的样式可在此处依次添加
)

步骤2：将自定义Typography传入App全局主题 #

找到项目中定义App主题的函数，将上述自定义实例传入MaterialTheme的typography参数：

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    // 颜色、形状等其他主题配置省略
    MaterialTheme(
        colors = if (darkTheme) DarkColorPalette else LightColorPalette,
        typography = MyCustomTypography, // 必须传入自定义的Typography实例
        shapes = Shapes,
        content = content
    )
}

步骤3：确保调用组件被自定义主题包裹 #

所有使用MaterialTheme.typography的Composable组件，必须处于自定义主题的包裹层级内：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyAppTheme { // 界面必须包裹在自定义主题内才可读取到自定义配置
                Text(
                    text = "Homemade veg pizza",
                    style = MaterialTheme.typography.subtitle1
                )
            }
        }
    }
}

常见踩坑排查 #

• 若使用Material3版本的Compose库，原有subtitle1属性已废弃，对应替换为titleMedium，需要同步修改Typography配置和调用处的属性名
• 检查Text组件是否单独设置了fontSize、fontFamily等属性，局部设置的属性优先级高于主题传入的style配置
• 可在调用处打印MaterialTheme.typography.subtitle1.fontSize验证配置是否生效，如果打印值和设置值不一致，说明主题传入步骤存在问题

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